В верстке есть такой блок, фиксированной высоты, в него вложены ещё три блока, верхний и нижний - фиксированной высоты, тот, что посередине - нет.
Не могу понять, как прижать нижний блок к низу родительского.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВ верстке есть такой блок, фиксированной высоты, в него вложены ещё три блока, верхний и нижний - фиксированной высоты, тот, что посередине - нет.
Не могу понять, как прижать нижний блок к низу родительского.
Родительскому установить:
position:relative;
padding-bottom:50px;
Дочерному:
position:absolute;
bottom:0;
Хм... Если размеры вам известны, то тут чистая математика. Если только средствами CSS, то можно, например, так сделать. Если размеры не известны изначально, то тут в помощь JS/jQuery.
@Heidel, извините, что с опозданием, вот взгляните - http://jsfiddle.net/Alex83/qktyU/
Если коротко, то блоку обертке задаем:
min-height: 100%; /*При этом у body, html { width: 100%; height: 100%;*/
А footer выносим за предел блока обертки и устанавливаем ему отрицательный верхний отступ:
margin-top: -50px;
#wrapper {
display: flex;
flex-direction: column;
height: 600px;
}
#center {
flex-grow: 1;
}