如何將HTML元素的高度設置爲{100％ - 從底部開始的10em}

Question

讓我們考慮一個元素#top。我希望它的高度達到頁面的100％，但從底部減少10em。我無法弄清楚如何去做。請幫忙。

HTML

<div id="top"></div> 
<div id="bottom"></div> 

CSS

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    font-size: 100%; 
} 
#top { 
    width: 100%; 
    height: 70%; 
    background-color: red; 
} 
#bottom { 
    position: absolute; 
    bottom: 0; 
    margin-left: 10%; 
    width: 100%; 
    height: 10em; 
    background-color: #000000; 
} 

參見http://codepen.io/anon/pen/jEqYMK（爲了說明，我已示出了一個多種元素，#bottom）。

Answer 1

你的演示是律奇怪，但不管怎麼說，如果你想從100%扣除10em然後使用calc()財產像

#top { 
    width: 100%; /* You won't need this */ 
    height: calc(100% - 10em); 
    background-color: red; 
} 

Demo

注：我已經刪除position: absolute;，margin-left像你的屬性演示，因爲我不知道爲什麼你在第一個地方使用它們，但如果你想要的話，你仍然可以使用它們。