This question already has an answer here:
这个问题在这里已有答案:
- CSS calc() not working 1 answer
- CSS calc()不能正常工作1回答
I am trying this:
我正在尝试这个:
.main{
min-height: -moz-calc(100% -50px);
min-height: -webkit-calc(100% -50px);
min-height: calc(100% -50px);
background-color:#000;
color:white;
}
html{
height:100%;
}
<html>
<body style='height:100%;'>
<header style='height:50px;background-color:#0e0'></header>
<div class="main">ok</div>
</body>
</html>
But it doesn't work
但它不起作用
I want my div to go to the bottom of screen minus the header that is 50px
我希望我的div去屏幕底部减去50px的标题
Thanks
谢谢
1 个解决方案
#1
1
height: 100%
can work if all ancestors of .main
have the same height defined but in your example the html
element has not defined any height.
height:如果.main的所有祖先都定义了相同的高度,则100%可以工作,但在您的示例中,html元素没有定义任何高度。
Example #1 (height set on html
element): http://codepen.io/anon/pen/bdrYqx
示例#1(在html元素上设置的高度):http://codepen.io/anon/pen/bdrYqx
You could try also vh
units: this won't require to set the height also on the ancestors
你也可以尝试vh单位:这也不需要在祖先上设置高度
.main{
min-height: -moz-calc(100vh - 50px);
min-height: -webkit-calc(100vh - 50px);
min-height: calc(100vh - 50px);
}
Example #2: (no height, only vh
unit): http://codepen.io/anon/pen/pJrdeB
示例#2 :(没有高度,只有vh单位):http://codepen.io/anon/pen/pJrdeB
#1
1
height: 100%
can work if all ancestors of .main
have the same height defined but in your example the html
element has not defined any height.
height:如果.main的所有祖先都定义了相同的高度,则100%可以工作,但在您的示例中,html元素没有定义任何高度。
Example #1 (height set on html
element): http://codepen.io/anon/pen/bdrYqx
示例#1(在html元素上设置的高度):http://codepen.io/anon/pen/bdrYqx
You could try also vh
units: this won't require to set the height also on the ancestors
你也可以尝试vh单位:这也不需要在祖先上设置高度
.main{
min-height: -moz-calc(100vh - 50px);
min-height: -webkit-calc(100vh - 50px);
min-height: calc(100vh - 50px);
}
Example #2: (no height, only vh
unit): http://codepen.io/anon/pen/pJrdeB
示例#2 :(没有高度,只有vh单位):http://codepen.io/anon/pen/pJrdeB