Как реализовать вертикальную жидкую компоновку с помощью div

Мой сайт состоит из трех компонентов:

  • заголовок фиксированной высоты, который охватывает ширину экрана
  • навигация фиксированной ширины под заголовком слева, которая охватывает оставшуюся высоту экрана
  • область содержимого справа от навигации, которая занимает все оставшееся пространство.

Я понимаю, как реализовать горизонтальный аспект гибкого макета, чтобы навигация оставалась фиксированной, а область содержимого занимала оставшуюся ширину, но я не понимаю, как реализовать вертикальный аспект жидкого макета, чтобы и навигация, и область содержимого занимать минимум оставшуюся часть высоты и максимум высоту их содержимого (при условии, что это больше, чем высота экрана за вычетом высоты заголовка).

Можно с дивами?


html layout css liquid-layout
person JnBrymn    schedule 04.10.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Да, это возможно. Взгляните на липкий футер Райана Фейта и мой предыдущий ответ на аналогичный вопрос.

person Joshua Carmody    schedule 04.10.2011
comment
Это, конечно, меня близко, но посмотрите, что происходит, когда вы заполняете div .wrapper большим количеством контента. Как только он становится достаточно высоким, он пишет поверх нижнего колонтитула :-( Наступает печаль. - person JnBrymn; 04.10.2011
comment
@糞_爺 - У вас есть ссылка? Я посмотрю на это, если вы это сделаете. У меня самой такой проблемы не было. Мы используем этот метод на нашем сайте, и у нас не возникло никаких проблем. - person Joshua Carmody; 05.10.2011
comment
Посмотрев снова на ryanfait.com/sticky-footer, я вижу, что на его сайте все работает нормально, поэтому Мне просто нужно выяснить, чем мое использование отличается от его. Спасибо за предложение. - person JnBrymn; 05.10.2011

arrow_upward
1
arrow_downward

Вот: http://jsfiddle.net/HcBKV/embedded/result/

Как правило, есть два способа сделать это. Один с установкой высоты и ширины на 100%, другой с растяжением с помощью абсолютного положения и фиксированной длины с каждой стороны.

person mowwwalker    schedule 04.10.2011