Как использовать 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; }    some variable height 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
 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 выше для ленивых / запутанных / людей, которые не могут заставить это работать.