-webkit-calc不适用于最小高度

时间:2015-06-16 07:42:19

标签: html css

我正在尝试这个:

.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>

但它不起作用

我希望我的div转到屏幕底部减去50px的标题

由于

1 个答案:

答案 0 :(得分:1)

如果 alert(Object.keys(coordinates).length); 的所有祖先都定义了相同的高度,则

height: 100%可以正常工作,但在您的示例中,.main元素未定义任何高度。

示例#1(在html元素上设置的高度):http://codepen.io/anon/pen/bdrYqx

你也可以尝试html单位:这也不需要在祖先上设置高度

vh

示例#2 :(没有高度,只有.main{ min-height: -moz-calc(100vh - 50px); min-height: -webkit-calc(100vh - 50px); min-height: calc(100vh - 50px); } 单位):http://codepen.io/anon/pen/pJrdeB