Set div height to fit container with overflow - html

Question

I have a two column div in a modal with overflow.
The left div is taller than the right div and causes overflow, and the right div has a slightly darker background color.
If I set right div height to 100%, or set the top and bottom to 0, then it only fills to the hight of the modal, so if you scroll down to see contend in the left div, then the background color of the overflow in the right goes to default.
How can I get that grey background to fill the entire height of the modal? I can't set a specific height for the column divs.
edit: JS FIDDLE

Answer 1

Use CSS table-layout:
.two-column {
display: table-cell;
width: 50%;
}
.right-column {
background-color: gray;
}
Example jsFiddle: http://jsfiddle.net/5Lvp3n5h/1/
.modal {
display: table;
}
.two-column {
display: table-cell;
width: 50%;
}
.left-column {
height: 5000px; /* This is actually dynamic in my case */
}
.right-column {
background-color: gray;
}
<div class="modal">
<div class="two-column left-column">Stuff</div>
<div class="two-column right-column">I wish this div would keep a gray background color even after scrolling.</div>
</div>

Answer 2

You can use CSS3 for this with display flex for the parent, to fit the height of the children to parent's height.
Example: https://css-tricks.com/boxes-fill-height-dont-squish/
Reliable documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 3

You can calculate and assign the height using javascript.
If you want to do it using css only:
you can use
display:table-cell;
see below link for reference:
fiddle
and if your left panel will always going to remain the larger one then you can also use the following trick:
fiddle

Answer 4

You can use Javascript or Jquery to set height of right div equal to left div when the page already loaded.
If you don't want to use Javascript or Jquery, I have a trick for your page like this:
Wrap two div inside a wrap div then set background-color darker to it.
The left div set background-color same as the modal.
The right div is not set background-color => It looks like darker background same as wrap div.

Answer 5

Try using padding on the right div or you can use tags to fill the space. Although it isn't the perfect coding practice but always does the trick