如何将 100% 高度应用于 div？答案

【问题标题】：How to apply 100% height to div?如何将 100% 高度应用于 div？
【发布时间】：2018-05-10 12:19:06
【问题描述】：

我想让最后一个/第三个 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>

【问题讨论】：

如果它已经在扩展并且您不想滚动，为什么不直接将高度设置为 90%。

标签： javascript jquery html css

【解决方案1】：

在 jQuery 中，你可以尝试这样的事情：

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

每当调整窗口大小时，都会修改最后一个 div 的高度，以便 div 延伸到页面底部。 Window 的 resize 方法在页面加载时被调用，因此 div 会立即调整大小。

如果你从窗口的高度减去 div 的顶部偏移量，你就剩下可用的最大高度。如果您应用了边距、填充边框，您可能需要调整减去的值，例如：

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

假设您希望 div 距离窗口底部 30px。

【讨论】：

这个小调整将包括 div 的填充/边距，而不是需要硬编码：$('div:last').height($(window).height() - $('div:last').offset().top - ($('div:last').outerHeight(true) - $('div:last').height()));

【解决方案2】：

在现代浏览器上：在容器div 上设置position: relative，在第三个div 上设置position: absolute。然后可以同时定位到容器的顶部和底部：top: 0px,bottom: 0px;

【讨论】：

使用这个，如果里面有一堆内容，内部 div 不会扩展，对吗？
很好的解决方案。在这里按预期工作。
不是很有效，因为这会给第三个 div 100% 的高度，并使其与前两个 div 重叠。它没有给第三个 div remaining 空间。

【解决方案3】：

您还可以通过向 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】：

您可以在 quirks 模式下使用纯 CSS height:100%（其中 100% 是窗口中可见区域的高度）值，方法是根本不使用 DOCTYPE 或使用 IE 错误的 HTML 4.0 DOCTYPE（没有 .dtd url )

<!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 body 风格的声明是为了摆脱 IE 中的空滚动条。但请记住 - 这是怪癖模式，这意味着您处于不可预测的领域，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>

也许这可行？！但是我不知道如果有文字会发生什么......

【讨论】：

【解决方案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%;'将指示浏览器为该特定 div 占用 100% 的可用屏幕空间，这意味着您的浏览器将检查浏览空间大小并将其返回给 CSS 引擎，而不检查其中是否有任何元素。

我认为适合此处的唯一解决方法是使用 David 提供的解决方案来使用 'position: absolute;底部：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】：

这是我完成的一个小 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>

【讨论】：

这会在页面加载时初始化 div 的高度。您可能还需要添加 Tatu Ulmanen 的代码，以便在每次调整窗口大小后更改 div 的尺寸。

【解决方案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;

    }); 
});

将以下内容放在您的脚本标签或外部 javascript 上。然后改变

当您调整窗口大小时...它会自动使其高度适应底部的可用空间。您可以拥有任意数量的 div，但是您只能在该父级内部拥有一个弹性。懒得计算多个弹性：）希望它有所帮助

【讨论】：

虽然我确实需要使用 outerHeight/outerWidth 而不是常规的高度/宽度，但效果很好。
你会如何抵消这个？

【解决方案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);
});

这应该包括在浏览器被调整大小的情况下......

【讨论】：

【解决方案13】：

window.onload = setHeight
window.onresize = setHeight
function setHeight() {
    document.getElementById('app').style.height = window.innerHeight  + "px"
}

【讨论】：