使用填充填充屏幕水平和垂直

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

设置百分比高度时，它与容器相关，必须具有明确的高度。如果设置height：auto，则容器将采用其内容的高度。 div的父级必须具有明确的高度属性，您可以设置在＆＃39; px＆＃39;或者在＆＃39;。您也可以设置＆＃39; vh＆＃39;

Answer 2

在样式表中添加以下代码。

html{
    height: 100%;
}

Answer 3

您可以添加height:100vh;

演示：http://jsfiddle.net/6yLhk17h/