Home/ Questions/Q 8603755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:23:53+00:00

So here’s what I want to do: Let there be a fixed size column.

  • 0

So here’s what I want to do:
Let there be a fixed size column. The height of the column should take up the size of the parent.

Inside the column I have two divs, stacked vertically. The width of both of them takes up the column width. The height of the first div is fixed size. The second however is variable, taking up whatever remains from the parent. Moreover its content is variable. If its content is to large a vertical scroll bar should appear.

How can I do this with HTML and CSS?

Here’s a quick JSFiddle POC.

My problem is that if I set the second divs height as auto it will stretch outside its parent. If I set it 100% it will be again larger than its parent. It’s important that the scroll bar to appear only for the second div, not the main div itself.

Thanks,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is what I would do:

    http://jsfiddle.net/Tfzhm/1/

    Add position:relative to the container div, and make the scrollable div position:absolute. The top should be set to the same amout of pixel as the height of the first stacked div. And finally, set bottom:0px so it gets to the bottom line of the containing div.

    • 0