0

我有一个包含两列的网站,在一个包装器 div 中。

包装器具有与最高 div 相同的高度,方法是提供浮动所有内容并提供包装器height:100%

这是我的问题:其中一列是一个带有溢出的 div:scroll 和几个图像。我试图将它的高度设置为 100%,认为它会占据包装器的整个高度。相反,它变成了所有图像相互叠加的高度。

如果我将带有图像 ( ) 的列的高度设置为#rightbox以像素为单位的特定高度,就会发生这种情况。

我希望它与其他带有文本的 div 具有相同的高度,因此我将其高度设置为 100%。然后发生这种情况。

如何使两列具有相同的高度?

编辑:我忘了提到文本的数量会有所不同,所以我无法为包装器定义特定的高度。

4

2 回答 2

1

100%除非您的父母提供实际高度,否则您不能将高度定义为。

#wrapper {
   height: 800px;
}

/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
   height: 100%;
   overflow: auto;
}

注意:如果包装器位于body元素内部,那么您需要先设置html,body { height: 100%; }包装器才能设置为100%

于 2012-04-05T23:47:27.613 回答
0

鉴于提供的代码数量有限......这里是一个纯 css 解决方案。

http://jsfiddle.net/rlemon/Q7MvS/

.wrapper {
 height: 600px;
 width: 800px;   
}
.panel {
 float: left;
 width: 400px;  
 height: 100%;    
}
.panel.right {
 overflow: scroll;
}

​</p>

于 2012-04-05T23:42:13.780 回答