Как использовать CSS для размещения фиксированного заголовка переменной высоты и прокручиваемого содержимого?

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

Макет, который я хочу:

-------------- head -------------- content -------------- 

где «голова» – это какая-то высота, в которой она нуждается, и «контент» не имеет минимальной высоты, но достигнет максимальной высоты нижней части windows просмотра, прежде чем станет прокручиваемым.

Возможно ли это в наши дни в чистом CSS? Я нацелен на IE8 +.

Чтобы уточнить, что я хочу, вот что я сделал бы, если бы знал высоту заголовка :

     body { margin: 0; } #head { background: yellow; height: 20px; /* I can't rely on knowing this. */ } #content { background: red; position: absolute; top: 20px; /* here also */ bottom: 0; width: 100%; overflow: auto; }     
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content
scrollable content

Предполагая, что «фиксированный» означает position:fixed , я не думаю, что это возможно в чистом CSS, поскольку position:fixed принимает элемент из streamа документа.

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

 var height = document.getElementById("head").offsetHeight; document.getElementById("content").style.marginTop = height + 'px'; 

Что-то вроде этого должно получить выведенную высоту фиксированного

и соответственно установить поле содержимого

. Вам также нужно будет явно задать цвет фона на фиксированном

, иначе при прокрутке содержимое будет просачиваться в фиксированное.

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

 
Header content goes here
Header content goes here
...

Я сделал комбинацию как принятого, так и ответа Эрика. Пустой div используется для подталкивания содержимого ниже «head». Ширина этого div устанавливается jQuery при запуске window.onresize:

 function resizeHeader() { $(".header-push").height($(".header").height()); } $(document).ready(resizeHeader); $(window).resize(resizeHeader); 

См. Этот jsFiddle для получения дополнительной информации.

Этот javascript будет принимать переменную высоту фиксированного заголовка и устанавливать верхний край содержимого для streamа под ним. Просто загрузите страницу.

  

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

       
Frozen Page Header

  • Проблема с внедрением CSS Sticky Footer
  • Можно ли использовать несколько фоновых изображений с помощью CSS?
  • Как масштабировать изображение в CSS-спрайте
  • Отзывчивый размер шрифта
  • Высота установки: 100% на моем элементе метки не работает
  • Каково максимальное значение пикселя для свойств ширины и высоты CSS?
  • Удалите синюю рамку из кнопки css custom-styleled в Chrome
  • Можно использовать граничный радиус вместе с пограничным изображением с gradleиентом?
  • 'свойство: 0' или 'свойство: 0px' в CSS?
  • Может ли class CSS наследовать один или несколько других classов?
  • Какова ценность единицы css 'ex'?
  • Interesting Posts

    R solve: система точно сингулярна

    В чем разница между параллельным программированием и параллельным программированием?

    setState не обновляет состояние сразу

    Можно ли одновременно выбирать и загружать несколько файлов в Internet Explorer?

    Нечеткая оценка компилятора отличается для постоянного выражения и другого выражения

    Причина того, что «ответ Сервлета уже совершен»

    Клавиши со стрелками не работают в htop на OS X в терминале

    Как обновить (добавить в) href в jquery?

    Преобразование NSArray в NSDictionary

    Отправка массива значений в процедуру Oracle для использования в предложении WHERE IN

    Какое разрешение может обрабатывать eeePC 1001HA / 1101HA с подключенным внешним монитором?

    Можем ли мы импортировать XML-файл в другой файл XML?

    Захват изображения с камеры и отображение в действии

    Не удалось найти пространство имен SpringNamespaceHandler для пространства имен XML

    Подключение к локальной сети – DOS для Windows 7

    Давайте будем гением компьютера.