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

时间:2013-04-25 08:21:37

标签: html css

我的情况: 在我的页面上,我在主要内容的右栏中有多个可折叠面板。 目前发生的事情是当我展开面板(包含大量文本)时,它会离开页面。 因此意味着用户无法阅读它。这是因为高度是硬编码的。 现在我想要发生的是当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;
}

感谢您提出任何建议

3 个答案:

答案 0 :(得分:0)

你可以使.container成为一个clearfix,这样它就会扩展到它里面的浮动元素的大小。这是关于使用clearfix的a great article

.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之外的所有内容。如果您还需要,请查看该文章。

答案 1 :(得分:0)

而不是使用高度,您可以尝试将位置设置为“绝对”,将0px顶部和机器人设置为.container?

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

答案 2 :(得分:0)

别管我们,我解决了......这是因为我正在用相对的高度和宽度定位div,所以我只使用了margin-top。

感谢所有人