将 div 高度设置为窗口高度

Posted 2023-03-06

【中文标题】将 div 高度设置为窗口高度

【英文标题】：Set div height to window height

【发布时间】：2015-02-26 23:31:31

【问题描述】：

我正在使用 ASP.NET 模板并尝试将我的内容设置为占据窗口的整个高度，但我无法实现。我有一个容器和 2 个兄弟 div 里面。将底部 div 设置为高度 100% 会导致它溢出容器。

我也在使用 Bootstrap。

我只能将它的高度百分比降低到更低的值，但没有更好的方法吗？ 我添加了一个屏幕截图和一个小提琴： http://jsfiddle.net/ob1g0752/

html：

<div style="height:100%; width:100%; border-style:solid; border-width:2px; position:absolute;">
<div style="margin:5px; width:100%; border-style:solid; border-width:2px; border-color:pink;">
    test
</div>
<div style="height:100%;width:100%; border-style:solid; border-width:2px; margin:5px; border-color:yellow;">
    test
</div>
 </div>
 <footer style="display:block;">footer</footer>

CSS：

body

    min-height:100%;
    min-width:100%;

html

    height:100%;

编辑 抱歉，我发布了旧版本的小提琴，这是更新的。观察黄色边框溢出容器。 http://jsfiddle.net/ob1g0752/4/

【问题讨论】：

将 height:100% 添加到您的身体选择器。

对不起，小提琴不是最新的，请参阅我的编辑jsfiddle.net/ob1g0752/4。

【参考方案1】：

你需要添加

margin: 0px;
padding: 0px;

致html和body。

此外，您的div 具有 2 像素边框和 100% 宽度。这会强制水平滚动条。

【参考方案2】：

删除边距和内边距会有所帮助，您还可以在设置宽度时添加box-sizing: border-box; 以考虑边框和内边距。另外我不确定你是否想让你的页脚贴在页面底部，但我做了这个以及这个小提琴中的其他修复：

http://jsfiddle.net/ob1g0752/2/

【讨论】：

对不起，小提琴不是最新的，请参阅我的编辑 jsfiddle.net/ob1g0752/4

好吧，是的，边框要溢出了，高度是 100%，它在另一个元素的下方，所以溢出将等于它下面的元素。如果您无法编辑height，您可以设置position: absolute 和top: 0。如果您希望内容显示在前一个元素下方，请确保您还将position: relative 添加到父元素并将padding-top: 20px 添加到黄色边框元素。使填充等于粉红色边框元素的高度。小提琴：jsfiddle.net/ob1g0752/5

问题是上面的 div 可以显示也可以不显示，在这两种情况下我都希望底部 div 占据容器空间的其余部分。同样在您的小提琴中，底部容器顶部边框与顶部边框重叠并且不在其下方。

查看这个问题***.com/questions/11225912/… 我认为第三个答案提供了您正在寻找的内容。在我的示例中，元素确实重叠，但底部有padding-top 将其内容向下推，因此内容本身不会重叠

谢谢，尽管他们要求顶部 div 为静态高度，但我会尝试查看它。我知道你设置了填充，但我也需要显示元素的边框，:(.