Сделайте DIV, чтобы сохранить остаток страницы вертикально?

Ответ 1

Вы можете использовать абсолютное позиционирование.

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    This is where the content starts.
</div>

CSS

BODY
{
    margin: 0;
    padding: 0;
}
#content
{
    border: 3px solid #971111;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 85px;
}
#header
{
    border: 2px solid #279895;
    background-color: #FFF;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

По позиционированию #content абсолютно и указав свойства верхнего, правого, нижнего и левого, вы получите div, занимающий весь видовой экран.

Затем вы установите padding-top на #content как >= высота #header.

Наконец, поместите #header внутри #content и установите его абсолютно (указав верхнюю, левую, правую и высоту).

Я не уверен, насколько это удобно для браузера. Просмотрите эту статью в List Apart для более информация.

Ответ 2

Способ сделать это, по-видимому, состоит в том, чтобы использовать JavaScript для контроля событий onload и onresize и программно изменять размер заполнения div следующим образом:

Использование jQuery:

function resize() {
    $("#bottom").height($(document).height() - $('#top').height());
}

Использование обычного JavaScript:

function resize() {
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}

Изменить:, а затем привязать их к объекту window.

Ответ 3

Другое решение, не заданное, использует CSS3, а не javascript. Теперь существует функция calc(), которая может использоваться для выполнения одной и той же функции:

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

CSS3

#content {
    height: 300px;
    border-style: solid;
    border-color: blue;
    box-sizing: border-box;
}
#header {
    background-color: red;
    height: 30px;
}
#bottom {
    height: calc(100% - 30px);
    background-color: green;
}

Вот jsfiddle

Вы также можете изучить стиль box-sizing: border-box для внутренних divs, поскольку это может избавиться от проблем заполнения и границ, вырывающихся за пределы родительских div.

Ответ 4

Если вы вычислите позицию страницы элемента div, вы можете обойтись без знания элемента заголовка:

function resize() {
    var el = $("#bottom");
    el.height($(document).height() - el.offset().top);
}

Ответ 5

Я рекомендую вам попробовать jquery-layout. В ссылке вы увидите кучу демонстраций и примеров.

Я не знаю, знакомы ли вы с понятиями JQuery или какой-либо другой фреймворк Javascript, например Prototype.js или Mootools, но это жизненно важная идея: используйте один из них. Они скрывают большинство программных средств, связанных с браузером, от программиста, и у них есть много полезных расширений для UI, DOM-манипуляций и т.д.

Ответ 6

umm, вам нужно добавить html, body { height: 100%; }, после этого, элемент relative, с min-height: 100%

После этого для IE6

<!--[if lt IE 7]>
<style media="screen" type="text/css">
    MyAutoheightElement
    {
        height: 100%;
    }
</style>
<![endif]-->

Это даст вашему сайту высоту 100% в каждом браузере.

Попробуй! Надеюсь, это поможет:)

Ответ 7

var sizeFooter = function(){
    $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);