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

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

问题： 有没有办法让页面高度与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; 
}

三江源的任何建议

来源

2013-04-25 Callum

您可以.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.之外如果您需要东星也只是看看这篇文章。

来源

2013-04-25 08:30:49

嗨，没有遗憾的代码无法正常工作......当我运行它的页面只是一片空白，可能是由于隐藏属性？ – Callum 2013-04-25 08:37:42

对不起，我犯了一个错误，再试一次 – 2013-04-25 08:39:29

嗯，没有，不工作eithe..strange – Callum 2013-04-25 08:40:53

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

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

来源

2013-04-25 08:31:36 2rsvold

别介意家伙，我解决了这个问题....这是由于这样的事实，我是用定位相对高度和宽度的DIV，所以我只是用的margin-top来代替。

感谢大家

来源

2013-04-25 09:29:17 Callum

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

回答

相关问题