Question

我希望我的main-div和footer-div与内容（height：auto）一起成长。 height：auto适用于页脚，但不适用于主要内容。当我尝试使用主包装时，它会弄乱页面。确切地说，页脚接管整个页脚和主页。我的页面结构是这样的：

<div id="page-wrapper">
 <div id="header"></div>
 <div id="main-wrapper"></div>
 <div id="footer"></div>
</div>

这是每个div的css：

#page-wrapper{
    margin-left:auto;
    margin-right:auto; 
    width:85%;
    -moz-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    -webkit-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    border-right:solid 1px #CCC;
    border-left:solid 1px #CCC;
}
#header{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:200px;
    background-color:#ffffff;

}
#main-wrapper{
    width:100%;
    height:auto; /* this line is the problem */
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E7EE;
}
#footer{
    width:100%;
    height:auto;
    background-color:#ffffff;
}

更新：

在main-wrapper中我有这两个div：

#text-wrapper{
    width:60%;
    float:left;
    font-weight:300;
    padding-left:50px; 
 }

#login-register-field{
    float:right;
    width:300px;
    height:260px;
    background-color:#BDBCC4;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
    margin-right:40px;
    margin-top:80px;
    position:relative;

}

这些会导致问题吗？

Answer 1

两个div内都没有内容，css height属性默认为auto，所以除非被其他一些样式规则覆盖，否则你不需要明确说明它。

如果您因为发布此问题而将div留空，那么我相信无论导致问题的原因都会丢失。

正如您在fiddle

中看到的那样，内容增长没有问题

Answer 2

定义身体和div的高度，然后得到你要求的东西 http://jsfiddle.net/r4mK7/2/

Answer 3

可以使用MAX和MIN高度属性作为另一种解决方案，例如：

#page-wrapper{
    margin-left:auto;
    margin-right:auto; 
    width:85%;
    -moz-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    -webkit-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    border-right:solid 1px #CCC;
    border-left:solid 1px #CCC;
}
#header{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:200px;
    background-color:#ffffff;

}
#main-wrapper{
    width:100%;
    height:auto; /* this line is the problem */
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E7EE;
}
#footer{
    width:100%;
    height:auto;
    max-height: 100px;
    min-height: 30px;/* or 0 if you wan to hide on null content*/
    background-color:#ADFADF;
    overflow:hidden;
}

为什么不高度：自动工作这两个元素？

3 个答案: