html - 响应页面高度作为 div 扩展 html css

Question

我的情况： 在我的页面上，我的主要内容的右侧栏中有多个可折叠面板。目前发生的情况是，当我展开面板（其中包含大量文本）时，它会离开页面。因此意味着用户无法阅读它。这是因为高度是硬编码的。现在我想要发生的是当 div 扩展时，如果它达到页面的最大高度，页面高度会扩展以包含所有文本。

问题： 有没有办法使页面高度与 div 一起扩展？

我的 CSS：

.container {
    width: 1000px;
    margin: 0px auto;
    background-color:White;
    height: 0px auto;
}
#page {
    overflow: hidden;
    width: 900px;
    padding: 0px 50px 50px 50px;
    background-color: #FFFFFF;
}
#content {
    float: right;
    width: 580px;
}

谢谢你的任何建议

Answer 1

您可以将 .container 设置为 clearfix，这样它就可以扩展到其中浮动元素的大小。这是一篇关于使用 clearfix 的好文章。

.container {
    width: 1000px;
    margin: 0px auto;
    background-color:White;
    height: 0px auto;
}

.container:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
 }

该代码将适用于 IE6 和 7 之外的所有内容。如果您也需要这些，请查看文章。

Answer 2

您可以尝试在 .container 上将位置设置为“绝对”和 0px 顶部和 bot，而不是使用高度？

.container {
    width: 1000px;
    margin: 0px auto;
    background-color:White;
    top: 0px;
    bottom: 0px;
}

Answer 3

没关系，伙计们，我解决了它....这是因为我用相对高度和宽度来定位 div，所以我只使用了 margin-top 。

谢谢大家