Question

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

Answer 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。

Answer 2

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

Answer 3

您还可以通过向CSS添加垂直重复的背景图像来使用虚拟列，使得列显示为玩具空间 - 这会显示出来。您可以将此图像添加到包裹三列或body标签的div中。

如果这些列中包含内容，则可能值得添加一些，因为列的行为会有所不同。

Answer 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>

请注意，使用此技术调整窗口大小时内容可能会消失。

Answer 5

你可以在怪癖模式下使用纯CSS height:100%（其中100％是窗口中可见区域的高度）值，完全不使用DOCTYPE或使用IE-faulty 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声明是摆脱IE中的空滚动条。但请记住 - 这是怪癖模式，这意味着您处于不可预测的领域，CSS框模型因浏览器而异;

Answer 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>

也许这可行吗？！但我不知道如果有变异文本会发生什么......

Answer 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>

Answer 8

物业'身高：100％;'将指示浏览器占用该特定div的100％可用屏幕空间，这意味着您的浏览器将检查浏览空间大小并将其返回到CSS引擎，而不检查其中是否有任何元素。

我认为适合的唯一解决方法是使用David提供的解决方案来使用'position：absolute;底部：0;'为那个div。

Answer 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>

Answer 10

这是我做过的一个小问题：

<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>

Answer 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，但是你的父母只能有一个弹性。无法计算多个弹性体:)希望它有所帮助

Answer 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);
});

如果浏览器已调整大小，则应包括此内容....

如何将100％的高度应用于div？

13 个答案: