Как установить высоту элемента html как {100% - 10em снизу}

Question

Рассмотрим один элемент #top. Я хочу, чтобы высота была 100% страницы, но уменьшена на 10 м снизу. Я не могу понять, как это сделать. Пожалуйста помоги.

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

Ваш демо лил странно, но в любом случае, если вы хотите, чтобы вычесть 10em из 100% затем использовать calc() свойство как

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

Demo

Примечание: Я удалил position: absolute;, margin-left как свойства от вашего потому что я понятия не имею, почему вы использовали их на первом месте, но если хотите, вы все равно сможете их использовать.