вертикальное расположение (заголовок - меню - контент - внизу)

Question

Я изменяю Flex для HTML / CSS / Javascript, но на моем пути возникают некоторые трудности.

Было бы здорово, если бы я мог создавать такие же макеты жидкостей и xbrowser (да ... я знаю):)

Я следовал следующему уроку: http://www.cssplay.co.uk/layouts/flexible-3column-fix-flex-fix.html

Но есть только то, что меня убивает, подвал. Могу ли я сложить его до дна, сделав содержимое 100%?

Спасибо !!!!

Answer 1

Из-за особенностей CSS очень трудно получить 100% ожидаемого контента выше нижнего колонтитула.Большинство браузеров отображают его как 100% высоты окна, а не оставшееся пространство между верхним и нижним колонтитулами.А так как эта высота может сильно различаться, вы не можете использовать на ней всеохватывающие данные.

Answer 2

Вы можете попробовать подобное решение: http://jsfiddle.net/steweb/wfmGN/

Я использовал этот трюк для многих веб-сайтов, и я доволен: D

разметка:

<div id="wrapper">
    <div id="footer">I'm da foota</div>
</div>

css:

body, html{
    height:100%;
    padding:0;
    margin:0;
}
#wrapper{
    min-height:100%;
    position:relative;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100px;
    background:#DEDEDE;
}

Answer 3

Вы можете использовать метод липкого нижнего колонтитула, который вы можете найти здесь http://www.cssstickyfooter.com/