logo标签列表

如何将div的高度设置为100%？

javascriptjqueryhtmlcss
18

我想让最后一个/第三个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%呢？ - Drevak
13个回答
24
在jQuery中，您可以尝试类似于这样的代码：
$(function() {
    $(window).resize(function() {
        $('div:last').height($(window).height() - $('div:last').offset().top);
    });
    $(window).resize();
});
无论何时调整窗口大小，最后一个div元素的高度都会被修改，以便使该div延伸到页面底部。在页面加载时调用窗口resize方法，以便立即调整div的大小。
如果从窗口的高度中减去div元素的顶部偏移量，您将得到可用的最大高度。如果应用了边距、边框或填充，则可能需要调整所减去的值，例如：
$('div:last').height($(window).height() - $('div:last').offset().top - 30);

假设您想要的div距离窗口底部为30像素。

7
这个小调整将为div包括填充/边距，而不是要求硬编码： $('div:last').height($(window).height() - $('div:last').offset().top - ($('div:last').outerHeight(true) - $('div:last').height())); - AaronSieb
6
在现代浏览器上：在容器 div 上设置 position: relative，在第三个 div 上设置 position: absolute。然后你可以同时将其定位到容器的顶部和底部：top: 0px，bottom: 0px;。
使用这种方法，如果内部div中有大量内容，它不会自动扩展，对吗？ - Matthew Scharley
很棒的解决方案。在这里按预期工作。 - artur
不是真正有效的，因为这将给第三个div 100％的高度，并使其重叠在前两个div上。它不会给第三个div剩余的空间。 - sereda
0
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
    document.getElementById('app').style.height = window.innerHeight  + "px"
}
0
$(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而不是普通的height/width，但它运行得很好。 - Jamie
你会如何进行偏移？ - Chozen
0

您可以在包含 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>

请注意，使用此技术调整窗口大小时，内容可能会消失。
如果内容增加，则隐藏它。 - Wasim Shaikh
0
您可以使用纯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..，它仍然会产生相同的效果。在 body 样式中使用 overflow:hidden 声明是为了消除 IE 中的空滚动条。但请记住 - 这是怪异模式，这意味着您处于不可预测的领域，CSS 盒子模型因浏览器而异！

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

也许这个可以行？但是如果有太多的文本会发生什么我不知道...

0

如果你的目标是让颜色填满底部，那就不要担心它。

设置外部 div 的颜色，让第三个 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

它看起来有点丑，但它可以工作。

 <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

这是我做的一个小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的尺寸。 - Jronny
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接