Заголовок переменной высоты с прокручиваемой областью содержимого, заполняющей оставшуюся область области просмотра - PullRequest
Новая
       8

Заголовок переменной высоты с прокручиваемой областью содержимого, заполняющей оставшуюся область области просмотра

4 голосов
/ 30 апреля 2010

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

Мне нужна веб-страница с заголовком полной ширины переменной высоты (высота зависит от содержимого). Ниже я хочу область содержимого, которая заполняет остальную часть области просмотра браузера. Если содержимое больше, чем оставшееся пространство в области просмотра, я хочу прокрутить область содержимого.

Мне не нужно это для работы на IE6. Мне все равно, использует ли решение CSS, таблицы или их комбинацию, просто без фреймов и без Javascript.

Для получения бонуса зафиксируйте нижний колонтитул переменной высоты в нижней части страницы.

1 Ответ

0 голосов
/ 02 мая 2010

Этого нельзя сделать только с помощью CSS / таблиц, если вы не знаете, насколько большими будут ваши два контейнера.

Если вы хотите использовать немного JavaScript, это будет прекрасно работать. 

<style>
body, html
{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section, header
{
    width:100%;
    display:block;
}
section
{
    background:red;
}
</style>
<script>
window.onload = window.onresize = function ()
{
    document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px";
}
</script>
<header id="head">
header
<br />
two
</header>
<section id="section">
scroll the rest
</section>
...