гибкий заголовок, прокручиваемый текст и нижний колонтитул в HTML - PullRequest
Новая
       27

гибкий заголовок, прокручиваемый текст и нижний колонтитул в HTML

2 голосов
/ 23 декабря 2011

Я пытаюсь создать простой HTML-макет с вертикальным расположением заголовка, раздела контента и нижнего колонтитула.

Высота верхнего и нижнего колонтитула должна быть гибкой, в зависимости от содержимого.

Высота раздела содержимого должна соответствовать оставшейся высоте, поэтому весь макет использует всю высоту окна. Раздел содержимого можно прокручивать.

Итак, по порядку:

  1. Header. Высота зависит от высоты содержимого. Нет полос прокрутки.
  2. содержание. Высота - остаток; window_height - (header_height + footer_height). Полоса прокрутки при необходимости (переполнение: авто;)
  3. Footer. Высота зависит от высоты содержимого. Нет полос прокрутки.

Существует много примеров для статических высот верхнего и нижнего колонтитула, но я не нашел ни одного, который мог бы иметь дело с высотами на основе содержимого.

Я пробовал простые div с позицией: абсолютный / относительный / фиксированный. Я пробовал div с отображением: таблица / таблица-строка / таблица-ячейка в нескольких конфигурациях. Я даже пытался использовать фактический. Но ни один из них, кажется, не работает. Вот одна из многих неудачных попыток: http://jsbin.com/uveloj/15/edit

Как я могу сделать это без сценариев (я предпочитаю не полагаться на JS, когда это возможно), если это вообще возможно.

Ответы [ 3 ]

1 голос
/ 27 декабря 2011

Вы думали об использовании фреймов?

1 голос
/ 30 апреля 2014

Я наткнулся на эту тему намного позже, но нашел ее полезной.

Я обнаружил, что в общем случае вам необходимо учитывать поля, границы и т. Д. Вы можете использовать функцию externalHeight () jQuery, чтобы помочь: 

$(window).resize(function() {
    var windowHeight = $(window).height();
    var headerHeight = $('div#header').outerHeight(true)
    var footerHeight = $('div#footer').outerHeight(true);

    var contentHeight = windowHeight - ( footerHeight + headerHeight );
    var contentMargins = $('div#content').outerHeight(true) - $('div#content').height();
    var contentInnerHeight = contentHeight - contentMargins;

    $('div#content').height(contentInnerHeight);
}).resize();

Помимо js, фиксирующих высоту контента, единственным действительно важным битом является то, чтобы стиль переполнения контента был прокручиваемым или автоматическим.

Вот модифицированный пример скрипки Роджера:

http://jsfiddle.net/nuAmG/1/

1 голос
/ 27 декабря 2011

Без использования JavaScript я не думаю, что это возможно. Чтобы получить среднюю прокрутку, вы хотите, чтобы область содержимого имела заданную высоту. Если верхний и нижний колонтитулы могут изменяться динамически, невозможно обновить высоту области содержимого для прокрутки без использования JavaScript. Тем не менее, это довольно простой макет, если вы хотите просто написать несколько строк JS. У меня есть хороший пример для вас:

http://jsfiddle.net/rogerblanton/8ctJJ/

Рамки НЕ ДОЛЖНЫ использоваться.

...