Question

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

包装器与最高的div具有相同的高度，通过赋予浮动所有内容并给出包装器height:100%。

这是我的问题：其中一列是带溢出的div：滚动并在其中包含多个图像。我试图将它的高度设置为100％，认为它会占用包装器的整个高度。相反，它成为所有图像的高度。

如果我将带有图像（#rightbox）的列的高度设置为特定高度（以像素为单位），则this会发生。

我希望它与文本的其他div具有相同的高度，因此我将其高度设置为100％。然后this发生了。

如何让两列具有相同的高度？

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

Answer 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% >

Answer 2

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

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

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

如何进行溢出：scroll div与其容器的高度相同？里面的细节

2 个答案: