Заполняющий экран горизонтальный и вертикальный с прокладкой

Question

Я здесь разрываю волосы. Кто-нибудь знает, как я могу получить div, чтобы заполнить экран как горизонтальный, так и вертикальный? Я могу заставить его заполнить его горизонтально, но он просто отказывается заполнять вертикаль, если не указать ширину в пикселях. Что я делаю не так?

Это то, что я хочу сделать, не придется прокручивать, чтобы получить снизу отступы:

Спасибо!

HTML:

<div id="main"> 
    <div class="main_content"></div> 
</div>​ 

CSS:

#main { 
margin-left:auto; 
margin-right:auto; 
height:100%; 
width:auto; 
padding-left:40px; 
padding-right:40px; 
padding-top:40px; 
padding-bottom:40px; 
} 

.main_content { 
width:auto; 
height:100%; 
background:#fff;  
} 

Answer 1

При установке высоту в процентах это связано с его контейнером, который должен иметь явную высоту. Если вы установите высоту: auto, контейнер будет занимать высоту своего содержимого. Родитель div должен иметь явное свойство высоты, вы можете установить его в 'px' или в 'em'. Вы также можете установить в 'vh'

Answer 2

Добавьте код, приведенный ниже в таблице стилей.

html{ 
    height: 100%; 
} 

Answer 3

вы можете добавить height:100vh;

Демо: http://jsfiddle.net/6yLhk17h/