Как использовать 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

  • Как заставить повторную визуализацию после преобразования WebKit 3D в Safari
  • Содержимое WebKit CSS Unicode?
  • Могу ли я использовать переменные для селекторов?
  • CSS отправить кнопку странного рендеринга на iPad / iPhone
  • Как создать число в списке html?
  • Есть ли способ обхода CSS classов с именами, которые начинаются с действительных чисел?
  • Есть ли способ разбить список на столбцы?
  • Какие селектора CSS3 действительно поддерживают jQuery, например: nth-last-child ()?
  • Изменение ширины бутстрапа
  • Как использовать JSF сгенерированный идентификатор HTML-элемента с двоеточием «:» в селекторах CSS?
  • Как вертикально центрировать контент с переменной высотой в div?
  • Давайте будем гением компьютера.