Вопросы и ответы
Топ за год Облако тегов  

как прижать <div> к низу <div>

html css веб дизайн верстка

Без имени, 351 просмотр
0
Здравствуйте!
мне нужно прижать дочерний <div> к низу родительского <div>
пример разметки
<div>
<div>
блок 1
</div>
<div>
блок 2
</div>
</div>

style position absolute не подходит так как родительский контейнер может изменять свой размер высоты и если поставить position:absolute при маленьком размере высоты родительского элемента происходит наползание блока2 на блок1, нужно как то сделать чтобы блок 2 был внизу а если высота родительского блока маленькая то блок 2 должен быть под блоком1 и не наползать! решение скриптом есть! Вопрос есть ли решение СSS

Примечание:
Maelstrom
1 - у меня XHTML а не HTML 5
2 - родительский div 100% height
3 - специально уходил от табличной верстки поэтому и проблемы

Примечание:
1 требование придерживаться стандартам
2 нельзя
3 таблицами верстать не страшно но причина (которую не помню) была ухода от табличной верстки

Примечание:
Pavlon (Пантелей Пафнутьич) - прикольный примерчик не то что я хотел но на мысль натолкнул спасибо задачу решил
Ответы:
Maelstrom
Вариант 1: Вместо дивов использовать более современные конструкции - NAV / HEADER, ARTICLE и FOOTER.
Вариант 2: Поместить див под другой див, а не в низ другого дива.
Вариант 3: Не мучаться и сделать таблицу.
---
1. А кто мешает заюзать HTML5?
2. Сделать height меньше. :)
3. А зачем от неё уходить? Таблицами боятся верстать только дилетанты. По факту нужно использовать то, что подходит под задачи.
Pavlon
<style>
.one {min-height:400px;height:100%;width:200px;background-color:red;position:relative;}
.two {height:200px;width:100px;position:absolute;bottom:0;background-color:yellow;}
.three {height:200px;width:100px;position:absolute;bottom:0;margin-left:100px;background-color:green;}
@media screen and (max-height: 450px) {
.two {margin-bottom:200px;}
.three {margin-left: 0;}
}
</style>
<div class="one">
<div class="two"></div>
<div class="three"></div>
</div>
Андрей Михайлов
<div id="main">
 <div class="one">
 one
 </div>
</div>
<div class="two">
 two
</div>


12 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.