Css 为什么'；t高度：在这两个元素上自动工作？

我希望我的主div和页脚div随内容（高度：auto）增长。高度：自动对页脚有效，但对主要内容无效。当我尝试使用它作为主包装时，它会弄乱页面。确切地说，页脚会同时接管整个页脚和main。我的页面结构如下所示：

<div id="page-wrapper">
 <div id="header"></div>
 <div id="main-wrapper"></div>
 <div id="footer"></div>
</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;

}

---

这些可能是导致问题的原因吗？

divs和css height属性中都没有内容。默认值为auto，因此您不需要显式声明它是auto，除非它被其他样式规则覆盖

如果您为了发布此问题而将div留空，那么我相信导致此问题的原因是丢失的

---

随着内容的增长没有任何问题，正如您在本书中所看到的那样，定义主体和div的高度，您就会得到您想要的。

---

使用最大和最小高度属性可能是另一种解决方案，例如：

#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;
}

---

height:auto

是

元素的默认值。如果你根本不设定，会发生什么？您的

应该展开以适应其内容。您是否尝试过此布局，但没有指定高度：auto？一般的规则是div将具有其内容的大小。JamWaffles和@AlexanderPavlov，我删除了它们中的height:auto，但仍然得到相同的结果。尝试对其父div执行此操作。@Keeper，父div是页面包装器，我没有为此指定任何高度。是否还应删除标题中的高度？我不认为这会是问题所在。是的，我把它们留了下来只是为了这个问题。我用页面包装器div中的两个div更新了我的问题。可能是这些div导致了问题。使用float时，需要添加容器溢出：auto，以便让容器正确地流向内容的底部。看更新的小提琴：这几乎解决了我的问题。主wapper和footer不再是页面包装器的子对象，这很奇怪。我仍然可以将它们视为页面包装器的子对象。如果你正在使用FireFox，试试Firebug工具。你可以自己给它们高度，或者，就像“Maayan Glikser”回答的那样，你可能应该在你的div中放一些内容来查看它们。是的，它们是，但是页面包装器与页眉、主页面和页脚的高度不一样，这就是我想要的。阴影现在不在整个主管道周围。顺便说一句，你的小提琴就是这样的：）

#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;
}