-webkit-CALC不爲最小高度

我想這方面的工作：-webkit-CALC不爲最小高度

.main{ 
 
      min-height: -moz-calc(100% -50px); 
 
    \t \t min-height: -webkit-calc(100% -50px); 
 
    \t \t 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

謝謝

來源

2015-06-16 lopata

請分享您在小提琴上工作的示例 – Shanaka

calc（100％-50px）; - 計算（100％ - 50px）; – Dmitriy

謝謝@Dmitriy，就是那個 – lopata

height: 100%可以工作，如果所有的.main的祖先都具有相同的高度定義，但在您的示例中，html元素尚未定義任何高度。

示例＃1（高度html元素上設置）：http://codepen.io/anon/pen/bdrYqx

你也vh單位嘗試：這不會需要還設置高度的祖先

.main{ 
    min-height: -moz-calc(100vh - 50px); 
    min-height: -webkit-calc(100vh - 50px); 
    min-height: calc(100vh - 50px); 
}

示例＃2 :(無高度，只有vh單位）：http://codepen.io/anon/pen/pJrdeB

來源

2015-06-16 07:47:52 fcalderan

它既不工作也不工作 – lopata

爲什麼它不在我的代碼片段上工作，然後在我的網站上（我已經將html設置爲100％） – lopata

我看到你已經更新了你的問題：那麼我想這是由於在（-''）如果它仍然不起作用，向我們展示問題出現的鏈接 – fcalderan

-webkit-CALC不爲最小高度

回答

相關問題