Html CSS：将 Div 高度设置为 100% - 像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1366548/
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
CSS: Set Div height to 100% - Pixels
提问by moonblade
I have a header on my page which is just over 100px (111px to be exact) The div below it needs to extend to the bottom of the viewport, as if i had set the bottom to 0px. The problem lies in the fact that i cannot specify top and bottom in ie6 (bug).
我的页面上有一个标题，它刚好超过 100px（准确地说是 111px）它下面的 div 需要延伸到视口的底部，就好像我已经将底部设置为 0px 一样。问题在于我无法在 ie6 中指定顶部和底部（错误）。
I can either specify top: 111px or bottom: 0px, but i still need the height to be correct ie. 100% -111px, according to the size of the viewport.
我可以指定顶部：111px 或底部：0px，但我仍然需要高度正确，即。100% -111px，根据视口的大小。
Can't seem to get expressions working coz that seems to be the solution
似乎无法使表达式正常工作，因为这似乎是解决方案
Here's my css code:
这是我的 css 代码：
position: absolute;
width: 200px;
top: 111px;
bottom: 0px;
Any suggestions?
有什么建议？
回答by Blaise M.
The best way to do this is to use view port styles. It just does the work and no other techniques needed.
最好的方法是使用视口样式。它只是完成工作，不需要其他技术。
Code:
代码：
div{
height:100vh;
}<div></div>回答by ranonE
I added the heightproperty to the bodyand htmltags.
我在body和html标签中添加了height属性。
HTML:
HTML：
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
CSS:
CSS：
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
min-height: 100%;
}
#header
{
height: 111px;
}
回答by Eric
Alternatively, you can just use position:absolute:
或者，您可以只使用position:absolute：
#content
{
position:absolute;
top: 111px;
bottom: 0px;
}
However, IE6 doesn't like top and bottom declarations. But web developers don't like IE6.
但是，IE6 不喜欢顶部和底部声明。但是 Web 开发人员不喜欢 IE6。
回答by Mohit Sharma
div{
height:100vh;
background-color:gray;
}<div></div>回答by Mohammed K. Abushawish
div{
height:100vh;
}<div></div>回答by RaphKomjat
Now with css3 you could try to use calc()
现在使用 css3 你可以尝试使用 calc()
.main{
height: calc(100% - 111px);
}
have a look at this answer: Div width 100% minus fixed amount of pixels
看看这个答案： Div 宽度 100% 减去固定数量的像素
回答by n1313
I'm guessing that you are trying to get sticky footer
我猜你是想获得粘性页脚
回答by Eric
Negative margins of course!
当然是负利润！
HTML
HTML
<div id="header">
<h1>Header Text</h1>
</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus
vel quam et quam congue sodales.
</div>
</div>
CSS
CSS
#header
{
height: 111px;
margin-top: 0px;
}
#wrapper
{
margin-bottom: 0px;
margin-top: -111px;
height: 100%;
position:relative;
z-index:-1;
}
#content
{
margin-top: 111px;
padding: 0.5em;
}
回答by Chiwda
100vh works for me, but at first I had used javascript (actually jQuery, but you can adapt it), to tackle a similar problw.
100vh 对我有用，但起初我使用 javascript（实际上是 jQuery，但你可以调整它）来解决类似的问题。
HTML
HTML
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
js/jQuery
js/jQuery
var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");
Alternately, you can just use 111px if you don't want to calculate headerHeight.
或者，如果您不想计算 headerHeight，您可以只使用 111px。
Also, you may want to put this in a window resize event, to rerun the script if the window height increases for example.
此外，您可能希望将其放在窗口调整大小事件中，以在窗口高度增加时重新运行脚本。
