Как применить высоту 100% к div?

Я хочу, чтобы последний/третий div был заполнен всем оставшимся пространством. Я дал 100% -ую высоту, но есть полоса прокрутки, которая я не хочу показывать. Я там какое-то решение для CSS. если это невозможно из css, тогда решение jQuery/JS будет в порядке.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
            width:100%; height:100%;
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="display:block;height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Ответ 1

В jQuery вы можете попробовать что-то вроде этого:

$(function() {
    $(window).resize(function() {
        $('div:last').height($(window).height() - $('div:last').offset().top);
    });
    $(window).resize();
});

Всякий раз, когда размер окна изменяется, последняя высота div изменяется так, что div продолжается до нижней части страницы. Метод изменения размера окна вызывается при загрузке страницы, так что div немедленно изменяется.

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

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

Предполагая, что вы хотите, чтобы div 30px находился в нижней части окна.

Ответ 2

В современных браузерах установите position: relative на контейнер div, position: absolute на третий div. Затем вы можете поместить его в верхнюю и нижнюю части контейнера одновременно: top: 0px, bottom: 0px;

Ответ 3

Вы также можете использовать столбцы faux, добавив вертикально повторяющееся фоновое изображение в CSS, чтобы столбцы отображали игрушку в пространстве - это дает представление. Вы можете добавить это изображение в div, который обертывает три столбца или тег body.

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

Ответ 4

Вы можете скрыть переполнение в содержащем DIV:

<html>
<head>
    <style>
        *{margin:0;padding:0;}
        html,body{height:100%;}
    </style>
</head>
<body>
    <div style="overflow:hidden;height:100%">
        <div style="height:100px;background-color:#ddd"></div>
        <div style="height:25px;background-color:#eee"></div>
        <div style="height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Обратите внимание, что содержимое может исчезнуть при изменении размера окна с помощью этой техники.

Ответ 5

Вы можете использовать чистые значения CSS height:100% (где 100% - высота видимой области в окне) в режиме quirks, вообще не используя DOCTYPE или используя IE-DEFTYPE HTML 4.0 (без URL-адреса .dtd )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>

Вы можете полностью отбросить <!DOCTYPE.., это все равно будет иметь тот же эффект. overflow:hidden Объявление в стиле тела - это избавиться от пустой полосы прокрутки в IE. Но помните - это режим quirks, что означает, что вы находитесь на непредсказуемой территории, модель CSS-бокса отличается от браузера браузером!

Ответ 6

html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; 
                height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Возможно, это может сработать?! Но я не знаю, что происходит, если есть текст mutch...

Ответ 7

Просто не беспокойтесь об этом, если ваша цель состоит в том, чтобы цвет заполнил нижнюю часть.

Установите цвет внешнего div, и пусть третий изменит его высоту, но он хочет, когда содержимое будет входить.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%;background-color:#ccc">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="">&nbsp;</div>
    </div>
</body>
</html>

Ответ 8

Свойство: высота: 100%; даст указание браузерам взять 100% доступного пространства экрана для этого конкретного div, что означает, что ваш браузер проверит размер пространства просмотра и вернет его на движок CSS, не проверив, есть ли в нем какие-либо элементы.

Единственным обходным решением, которое я вижу здесь, является использование решения, предоставленного Дэвидом, для использования "position: absolute; bottom: 0; ' для этого div.

Ответ 9

он немного уродлив, но он работает.

 <html style="height:100%">
    <head>
        <style type="css">
            html , body {
                    width:100%;
                    height:100%;
                    padding:0px;
                    margin:0px;
            }
        </style>
    </head>
    <body style="height:100%;padding:0px;margin:0px;">
        <div style="width:100%;height:100%;">
            <div style="width:100%;height:100px;background-color:#ddd;">&nbsp;</div>
            <div style="width:100%;height:25px;background-color:#eee;">&nbsp;</div>
            <div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;">&nbsp;</div>
        </div>
    </body>
 </html>

Ответ 10

Здесь исправлено litle jquery, которое я сделал:

<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
        $("#thirdDiv").height(heightToFill);
    });
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
    <div id="firstDiv" style="height: 100px; background-color: #ddd">
        &nbsp;</div>
    <div id="secondDiv" style="height: 25px; background-color: #eee">
        &nbsp;</div>
    <div id="thirdDiv" style="background-color: #ccc;">
        &nbsp;a</div>
</div>
</body>
</html>

Ответ 11

$(window).resize(function(){
        $('.elastic').each(function(i,n){
        var ph = $(this).parent().height();
        var pw = $(this).parent().width();
        var sh = 0; 
        var s = $(this).siblings().each(function(i,n){
            sh += $(this).height();
        })
        $(this).height(ph-sh);
        sh = 0, ph = 0, s=0;

    }); 
});

добавьте следующее в свой тег script или внешний javascript. затем измените

когда вы изменяете размер окна... он автоматически поместит его высоту в свободное место внизу. у вас может быть столько div, сколько вам нравится, но вы можете иметь только один эластик внутри этого родителя. не могли быть обеспокоены, чтобы вычислить несколько резинок:) надеюсь, что это поможет

Ответ 12

$(document).ready(function() {
    var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
    $("#thirdDiv").height(heightToFill);

    $(window).resize(function(){  var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
    $("#thirdDiv").height(heightToFill);
});

Это должно быть включено в случае изменения размера браузера....