在整页上显示容器

Question

编辑：jsfiddle

我已经设置了

html{
height: 100%;
}

并且

body{
min-height: 108%;
}

即使content为空，我也希望将footer显示为content的全高。

这是container

这是content

Answer 1

您可以通过height:100%向min-height:108%添加body元素来解决此问题：

http://jsfiddle.net/C8UUt/1/

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

    background: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
    min-height: 108%;
    height: 100%;
}

更新

要使sidebar1全高，你可以使用一个小技巧：

http://jsfiddle.net/C8UUt/3/

.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto;
    min-height: 100%;
    position: relative; // added this to tell position:absolute that this is his parent
}

.sidebar1 {
    float: left;
    width: 180px;
    background: #EADCAE;
    padding-bottom: 10px;
    display: inline-block;
    height: 100%; // to make it 100% height
    position: absolute; // added this so it will take `min-height` of parent into account
}
.content {
    padding: 10px 0;
    width: 780px;
    display: inline-block;
    /* float: left; */
    height: inherit;
    margin-left: 180px; // since position:absolute doesn't take part in the normal flow, we must account for that space manually
}

Answer 2

如果您的浏览器支持CSS3，请使用：

.container {height:100vh;}