如何正确设置 100% DIV 高度以匹配文档/窗口高度？

Posted

技术标签:

【中文标题】如何正确设置 100% DIV 高度以匹配文档/窗口高度？【英文标题】：How to properly set the 100% DIV height to match document/window height? 【发布时间】：2012-03-02 02:40:12 【问题描述】：

我有一个以 y 重复背景图像居中放置的包装器：

<body>
    <div id="wrapper">
        ...some content
    </div>
</body>

#wrapper
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;

问题：当窗口大小高于从其内容继承的包装器高度时，图像显然不会在 y 轴上一直重复到窗口底部。

我已经使用 jQuery 根据实际文档高度动态地将内联 CSS 样式应用于包装器（当 DOM 准备好并且在窗口调整大小事件时）：

$(function()
    $('#wrapper').css('height':($(document).height())+'px');
    $(window).resize(function()
        $('#wrapper').css('height':($(document).height())+'px');
    );
);

这种方法的问题在于，每次将窗口高度扩展为大于之前调整大小的最大尺寸时，文档高度都会扩展此差异，如果您不断调整窗口大小并且拥有无限的垂直显示空间。

在典型的 30" 英寸显示器上，高度为 1600px，当用户打开窗口高度为 1000px 且包装器高度为 800px 的网站时，上面的 jQuery 将高度设置为 1000px 以正确平铺背景图像。此时，一旦用户将窗口大小扩展到例如 1400px，1400px 是一个新的文档大小“记住的默认值”，即使用户将窗口大小调整回原来的 1000px 高度，也不会自行更新，将 400px 添加到滚动条高度 在底部。

如何解决这个问题？

更新：(window).height 似乎不起作用，因为窗口高度是视口高度。当您的视口小于内容并且您滚动它时，包装器始终保持视口的大小并且不会延伸到当前视口位置的底部。

【问题讨论】：

把背景图片放在一个单独的类中。然后在调整大小后或在调整大小期间删除并重新添加该类？ 尝试使用$(window).height() 而不是$(document).height() $(window).height() 不正确，例如如果你的窗口大小只有 200px 高，那么 DIV 也会保持 200px 高。当您滚动时，repeat-y 背景会在 200 像素的阈值处停止，而实际内容要长得多。 【参考方案1】：

在某人的回答的帮助下，我自己弄清楚了。但是他出于某种原因删除了它。

解决办法如下：

    删除所有 CSS 高度 hack 和 100% 高度 使用 2 个嵌套包装器，一个接一个，例如#wrapper 和 #truecontent 获取浏览器视口的高度。如果它大于#wrapper，则为#wrapper 设置内联CSS 以匹配当前浏览器视口高度（同时保持#truecontent 不变）

    监听 (window).resize 事件并仅在视口大于 #truecontent 的高度时应用内联 CSS 高度，否则保持不变

    $(function()
    var windowH = $(window).height();
    var wrapperH = $('#wrapper').height();
    if(windowH > wrapperH)                             
        $('#wrapper').css('height':($(window).height())+'px');
                                                                                   
    $(window).resize(function()
        var windowH = $(window).height();
        var wrapperH = $('#wrapper').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('#truecontent').height();
        if(windowH > truecontentH) 
            $('#wrapper').css('height', (newH)+'px');
        

    )          
);

【讨论】：

【参考方案2】：

最简单的方法是添加：

$('#ID').css("height", $(document).height());

在浏览器确定正确的页面高度之后。如果文档高度再次更改，请重新运行上述代码。

【讨论】：

完美。在 Flexbox 之外，这是最简洁的方法。您可能会争辩说需要 javascript 是一个弱点，但由于这个技巧通常纯粹是装饰性的，我认为没有问题。 简单易行。谢谢。 是的，这应该是正确的选择【参考方案3】：

您可以将其设为 absolute 并将零设为 top 和 bottom 即：

#fullHeightDiv 
    position: absolute;
    top: 0;
    bottom: 0;

【讨论】：

糟糕，这将使它成为 100% 的宽度和 100% 的高度。省略 left 和 right CSS 属性 :) 我需要将包装器居中并继承其背景图像相对位置到包装器位置。 这是一个很棒的解决问题的办法。好主意！ 它不起作用 - 只有在您扩展窗口高度时才会扩展。但是如果你缩小窗口并滚动内容，它就不能正确平铺。 @JoshJones 不，不是。如果 #fullHeightDiv 的父级具有相对位置且高度或宽度为 1px，则您是 F 。 ü。 C .. 不行【参考方案4】：

我发现最简单的方法是 css 中的 viewport-height .. 

div height: 100vh;

这会获取浏览器窗口的视口高度并在调整大小时更新它。

见"can i use" for browser compatibility list

【讨论】：

【参考方案5】： 
html, body 
    height:100%;

#wrapper 
    min-height:100%;

【讨论】：

不起作用 - 当您从小窗口大小开始并滚动时，DIV 高度不会扩展并保持为原始窗口大小的 100%。 我已经修复它添加#wrapper min-height:100%; 当我测试它的工作。如果它不再适合你，请告诉我，我会调整它。 我在运行 trident 和 gecko 引擎的 chrome、IE 8 和 Lunascape 中对其进行了测试，它们对我来说都适用。除非有一些我想念的怪癖。 height: 100% 和 min-height: 100% 使 DIV 为视口的 100% 高度。这是不正确的。视口可以小于实际文档大小。【参考方案6】：

我是这样回答的

<script type="text/javascript">
    function resizebg()
        $('#background').css("height", $(document).height());
    
    $(window).resize(function()
        resizebg(); 
    );
    $(document).scroll(function()
        resizebg(); 
    );
    //initial call
    resizebg();

</script>

css:

#background
position:absolute;
top:0;
left:0;
right:0;

所以基本上在每次调整大小的事件中，我都会覆盖 div 的高度，在这种情况下，我会使用一个图像作为背景的叠加层，并使其具有不透明性而不那么丰富多彩，我也可以在我的情况下使用背景颜色对其进行着色.

但那是另一个故事

【讨论】：

【参考方案7】：

使用#element height:100vh

这会将#element 的高度设置为viewport 的100%。 希望这会有所帮助。

【讨论】：

【参考方案8】：

为什么不使用width: 100% 和height: 100%。

【讨论】：

不起作用 - 当您从小窗口大小开始并滚动时，DIV 高度不会扩展并保持为原始窗口大小的 100%。 在一个复杂的页面中，有很多元素都设置了样式，如果要设置高度的元素嵌套在其他元素中，这将无法正常工作，或者根本无法正常工作（确切的情况失败的情况也因浏览器而异）。【参考方案9】：

这是怎么回事

<style type="text/css">
#wrapper
width: 900px;
margin: 0 auto 0 auto;
background: url('image.JPG') 250px 0px repeat-y;

</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function handleResize() 
var h = $(window).height();
        $('#wrapper').css('height':h+'px');

$(function()
        handleResize();

        $(window).resize(function()
        handleResize();
    );
);
</script>
</head>
<body>
        <div id="wrapper">
                ...some content
        </div>
</body>

【讨论】：

将窗口大小调整为较小的高度然后滚动内容时无法正常工作。

以上是关于如何正确设置 100% DIV 高度以匹配文档/窗口高度？的主要内容，如果未能解决你的问题，请参考以下文章

如何设置 div 的高度匹配响应内容？

CSS：将 div 高度设置为 100% - 像素

CSS：将 div 高度设置为 100% - 像素

CSS：将 div 高度设置为 100% - 像素

CSS：将 div 高度设置为 100% - 像素

如何将两个浮动 div 设置为页面的 100% 高度