如何用任何高度的 div 填充屏幕上的可用高度？答案

【问题标题】：How to fill the the available height on screen with the div for any height?如何用任何高度的 div 填充屏幕上的可用高度？
【发布时间】：2011-08-22 14:21:08
【问题描述】：

我想用<header> 填充任意大小的屏幕（宽度和高度）：

<header></header>
    <div id="content"></div>
<footer></footer>

<header> 应始终在 iPad 中的任何高度的显示器上填满整个屏幕，这样<div id="content"> 的内容只会在滚动后才能看到，而不是在滚动之前。

【问题讨论】：

How to create div to fill all space between header and footer div 的可能重复项

标签： html css

【解决方案1】：

只需将您的html、body 和header 设置为 100% 的高度：

html, body, header {
    height: 100%
}

http://jsfiddle.net/tujsj/

【讨论】：

@Jitendra Vyas：我的解决方案就是这样做的！
当我尝试布局时，
只在其中的元素上取高度。不是 100%。我做错了什么？我在css底部添加了html, body, header { height: 100% }
@Jitendra Vyas：你的header是直接在body下面吗？如果没有，那么您还必须给其他元素一个 height: 100%。
不，我有Body > #container > header > #header-inner
@Jitendra Vyas：那么，就像我说的，你必须这样做html, body, #container, header { height: 100% }。

【解决方案2】：

您可以使用新的非常有用的-I-can't-imagine-what-took-W3C-so-long vh CSS 单元：

<header style="height: 100vh"></header>
    <div id="content">must scroll to see this</div>
<footer></footer>

【讨论】：

【解决方案3】：

您是否尝试过使用 javascript，特别是 jquery 来处理这个问题？

如果你在你的 head 标签中包含 jquery，那么你可以使用这样的东西：

$(document).ready(function(){
    $("#header").height($(window).height());
});

【讨论】：

使用 css 方法，请务必在多个浏览器和版本上进行测试，因为我在高度为 100% 时得到了混合结果。