Как использовать 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: стилизовал флажок, чтобы он выглядел как кнопка, есть ли зависание?
  • Использование XSL-FO, CSS3 вместо CSS2 для создания разбитых на страницы документов, таких как PDF?
  • Макет сетки с реагирующими квадратами
  • Как я могу переопределить стили CSS Bootstrap?
  • Можете ли вы настроить элемент с помощью CSS только в том случае, если присутствуют 2 classа?
  • Оставить панель меню, зафиксированную сверху при прокрутке
  • Как сделать детей Flexbox 100% высотой своего родителя?
  • Есть ли селектор CSS для текстовых узлов?
  • Почему селектор h3: nth-child (1): содержит ('a') работу?
  • Пользовательский цвет границы треугольника CSS
  • Что плохого в встроенном CSS?
  • Давайте будем гением компьютера.