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

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

18 голосов
/ 30 ноября 2009

Я хочу сделать последний / третий 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>

Ответы [ 13 ]

23 голосов
/ 30 ноября 2009

В 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 снизу окна.

6 голосов
/ 30 ноября 2009

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

0 голосов
/ 10 мая 2018 
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
    document.getElementById('app').style.height = window.innerHeight  + "px"
}
0 голосов
/ 10 января 2012 
$(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);
});

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

0 голосов
/ 06 января 2010 
$(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;

    }); 
});

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

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

0 голосов
/ 30 ноября 2009

Вот небольшое исправление 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>
0 голосов
/ 30 ноября 2009

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

 <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>
0 голосов
/ 30 ноября 2009

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

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

0 голосов
/ 30 ноября 2009

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

Установите цвет внешнего 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>
0 голосов
/ 30 ноября 2009 
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>

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...