Как использовать 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 Media Query - Soft-клавиатура нарушает правила ориентации CSS - альтернативное решение?
  • относительный путь к файлу CSS
  • css3 переход анимации при загрузке?
  • Свойство CSS \ 9 в ширине
  • Arrow Box с CSS
  • Как объединить фоновые изображения и gradleиент CSS3 с одним и тем же элементом?
  • Переход CSS3 на клик с использованием чистого CSS
  • Используйте jQuery / CSS, чтобы найти самый высокий из всех элементов
  • Есть ли родительский селектор CSS?
  • Могу ли я настроить таргетинг на: перед или: после псевдоэлемента с помощью сочетания братьев и сестер?
  • Форма треугольника с фоновым изображением
  • Давайте будем гением компьютера.