Задать вопрос
splatt
@splatt
html

Возможно ли растягивать контейнер с абсолютно-позиционированными div'ами внутри по высоте на максимум средствами css?

Всем привет.
Есть некий html-шаблон с контейнером и абсолютно спозиционированными дивами в нем:
<html>
<body>
 <div id="container">
   <div id="first"></div>
   <div id="second"></div>
 </div>
</body>
</html>


div#first и div#second имеют position:absolute, с жестко указанными left и top. (ну например, top:2000px).
Возможно ли средствами css (не javscript'ом) растягивать контейнер на максимальную высоту?
Я понимаю, что div с position:absolute в теории должен быть невидимым для контейнера, и тем не менее, при описанной выше конструкции высота самой страницы растягивается, и появляется скроллбар.

И так, еще раз вкратце: возможно ли растянуть контейнер с абсолютно позиционированными дивами внутри на максимальную высоту (что бы в нем умещались все дивы) средствами css?
  • Вопрос задан
  • 17825 просмотров
1 комментарий
Подписаться 4 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 5
tenbits
@tenbits
«что бы в нем умещались все дивы»: вы же правильно вначале написали, что «div с position:absolute в теории должен быть невидимым для контейнера», тоесть контейнер никак не подстраивается под абсолютные дивы. Вот в примере adminimus'a первая и вторая панель будут не видны, если не указать
html, body{margin:0; height:100%;}. И все потому, что высота будет 0, а overflow:hidden скроет все что за контейнером (но если бы мы не указали контейнеру position:relative;, то абсолютные дивы позиционировались в body и были бы видны). Если вам все же надо, что бы контейнер подстраивался под детей, то абсолютное позиционирование не подойдет. Вам бы поподробнее описать проблему и желаемый результат.
Ответ написан
Комментировать
Комментировать
adminimus
@adminimus
Не совсем понял, что же вам в итоге нужно. Что-то вроде этого?
.container {
    background-color: grey;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 200px;
}
.first {
    left: 10px;
    position: absolute;
    top: 10px;
}
.second {
    left: 20px;
    position: absolute;
    top: 400px;
}
Ответ написан
Комментировать
Комментировать
MTonly
@MTonly
Веб-разработчик с 2002 года
Полоса прокрутки у окна браузера — исключение. В общем случае абсолютно позиционированные элементы вырваны из общего потока и на высоту родительского блока влиять не могут.
Ответ написан
Комментировать
Комментировать
MTonly
@MTonly
Веб-разработчик с 2002 года
На всякий случай: манипулировать z-index’ом можно не только при абсолютном (position: absolute), но и при относительном (position: relative) позиционировании.
Ответ написан
2 комментария
2 комментария
@wdtime_ru
чтобы z-index правильно срабатывал, нужно проставлять позиционирование и значение z-index всем элементам ветки вложенности..

в целом, про позиционирование элементов не плохо написано тут: position css
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Создать телеграм бота с нейронками ChatGPT Midjourney
10 мая 2024, в 12:22
60000 руб./за проект
Разработка сайта на WordPress/Opencart для мебельной компании
10 мая 2024, в 12:08
65000 руб./за проект
Разработчик вебхуков амосрм
10 мая 2024, в 11:47
500 руб./за проект
Ещё заказы