Html 如何使 div 为窗口高度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13609531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a div 100% of window height?
提问by dvlden
I just want to have a sidebar that will be 100% of window height, but nothing works except this:
我只想有一个 100% 的窗口高度的侧边栏，但除此之外没有任何效果：
#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}
I don't want to have position: fixed, because I have horizontally scrollable content, so a fixed part would remain, well, fixed.
我不想有position: fixed，因为我有水平滚动的内容，所以固定的部分会保留，好吧，固定。
Is there any way to do such a thing, maybe with relativeor absoluteposition?
有没有办法做这样的事情，也许是用relative或absolute定位？
Here's an quick Fiddle just for a test and explanation: JSFiddle
这是一个用于测试和解释的快速小提琴： JSFiddle
回答by fyarci
回答by Darren Wainwright
tl;dr- add html, body {height:100%;}to your CSS.
tl;dr- 添加html, body {height:100%;}到您的 CSS。
Percentage values in CSS are inherited from some ancestor that already has height declared. In your case, you need to tell all parents of your sidebar to be 100% height. I'm assuming that #sidebarBackis a direct child of body.
CSS 中的百分比值是从一些已经声明高度的祖先继承的。在您的情况下，您需要告诉侧边栏的所有父级为 100% 高度。我假设那#sidebarBack是body.
Essentially, your code above is telling #sidebarBackto be 100% height of its parent. Its parent (we are assuming) is body, so you need to set height: 100%;on bodyas well. We can't stop there, however; bodyinherits height from html, so we alsoneed to set height: 100%;on html. We can stop here, because htmlinherits its properties from viewport, which already has a declared height of 100%.
本质上，你上面的代码告诉#sidebarBack它是其父级的 100% 高度。其母公司（我们假设）是body，所以你需要设置height: 100%;上body也是如此。然而，我们不能就此止步；body从 继承高度html，所以我们还需要height: 100%;在html. 我们可以停在这里，因为html从 继承了它的属性viewport，它已经声明了高度100%。
This also means if you end up putting the #sidebarinside another div, then that divalso needs height:100%;.
这也意味着如果你最终把#sidebar另一个放在里面div，那么那div也需要height:100%;.
Here is an Updated JSFiddle.
这是一个更新的 JSFiddle。
Changed your CSS to:
将您的 CSS 更改为：
html, body {
height:100%;
}
#sidebar {
background: rgba(20, 20, 20, .3);
width: 100px;
height: 100%;
left: 0;
float:left;
}
section#settings {
width:80%;
float:left;
margin-left:100px;
position:fixed;
}
回答by Lee
First, tell the body element to fill the window, rather than shrinking to the size of the content:
首先，告诉 body 元素填充窗口，而不是缩小到内容的大小：
body { position: absolute; min-height: 100%; }
by using min-heightinstead of height, body will be allowed to expand beyond the window's height when the content is longer than the window (i.e. this allows for vertical scrolling when needed).
通过使用min-height而不是height，当内容比窗口长时，body 将被允许扩展到超过窗口的高度（即这允许在需要时垂直滚动）。
Now, set your "#sidebar" to be position:absolute, and use top:0; bottom:0;to force it to fill the parent element's vertical space:
现在，将“#sidebar”设置为position:absolute，并使用top:0; bottom:0;它来强制填充父元素的垂直空间：
#sidebar {
position: absolute;
top:0; bottom:0;
left: 0;
width: 100px;
background: rgba(20, 20, 20, .3);
}
Here are a couple of jsFiddles:
这里有几个 jsFiddles：
As you'll see, in both examples, I've preserved your width setting on the "#settings" section, thus showing that horizontal scrolling works as you requested.
正如您将看到的，在两个示例中，我都在“#settings”部分保留了您的宽度设置，从而显示水平滚动按您的要求工作。
回答by Simon West
Try the following
尝试以下
#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
top:0;
bottom:0;
left: 0;
}
回答by Mak
Try this -
尝试这个 -
html,body{height:100%;}
#sidebar {
background: rgba(20, 20, 20, .3);
/*position: fixed;*/
width: 100px;
height: 100%;
left: 0;
float:left;
}
section#settings {
width: 62%;
height: auto;
display: inline-block;
position: relative;
margin-left: 100px;
float:left;
}
?
?
