如何使 overflow:scroll div 与其容器具有相同的高度？ 里面的细节

Question

I have a website with two columns, within a wrapper div.

The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100% .

Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.

If I set the height of the column with images ( #rightbox ) to a specific height in pixels, this happens.

I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.

How can I make the two columns have the same height?

EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.

Answer 1

You cannot define height as 100% unless your parents provides an actual heights.

#wrapper {
   height: 800px;
}

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

Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } html,body { height: 100%; } before the wrapper can be set to 100%

Answer 2

Given the limited amount of code provided... here is a pure css solution.

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

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