-webkit-calc不适用于min-height [重复]

时间:2022-11-13 15:34:45

This question already has an answer here:

这个问题在这里已有答案:

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