Update container height dynamically using css

Question

I would like to implement a layout which consists of 3 cells;

A fixed header (position: fixed;),

B left menu,

C main container.

A and B with a fixed height.

C filling up the remaining space (just the remaining height). Using CSS, how can I achieve this result?

The problem does occurs only when the C section height is less then the body/window height.

To the following link you can get an example how to achieve this result. But it works only if you have one column.

http://jsfiddle.net/hqCcx/3/

enter image description here

What gap? Do you want it to fill the height of the page? What do you want it to do if the content of C would cause the page to scroll? — Dismissile
– Dismissile, Commented Jan 5, 2012 at 18:22
By the way, height: 100% doesn't really do anything in a modern browser. Height will always take up what it needs unless you specify a specific value like 600px, etc. — Dismissile
– Dismissile, Commented Jan 5, 2012 at 18:23
I'd like C section filling up the window size. If C cell causes the page to scroll there is no problem, because the empty space will be fill up from C. The problem is just when the height of C is less the window size! — antonjs
– antonjs, Commented Jan 5, 2012 at 19:50

antonjs · Accepted Answer · 2012-01-06 09:46:37Z

2

Ok finally I found the solution...

The trick is to set the height of the outermost elements to be 100%

And than, the general rule to make 100% height is to set min-height on the content’s container.

html, body {height: 100%}

#content {min-height: 100%}

To this link the working example.

edited Jan 6, 2012 at 9:46

answered Jan 6, 2012 at 9:40

antonjs

14.4k15 gold badges70 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lee · Accepted Answer · 2012-01-05 20:04:39Z

0

You may have to resort to using JavaScript to resize 'C', as CSS doesn't fill the browser window.

answered Jan 5, 2012 at 20:04

Lee

9314 silver badges14 bronze badges

Comments

TLS · Accepted Answer · 2012-01-05 20:20:18Z

0

I think the closest thing you'll get with pure CSS is min-height on the C object. I say "closest" because not all browsers support this, and it won't always fill the vertical space exactly. It will be an estimation, and if you put anything below the C object, it might not appear in the browser without scrolling if the window isn't tall enough to show the minimum height that you've set.

Also, min-height with a percentage value doesn't do anything, which is why you're not getting the result you want in your jsfiddle example. You have to use a non-percentage value like 300px or something. Here's a jsfiddle that shows it in practice. Uncomment the extra Test<br /> lines to see what happens when the content is taller than the minimum height.

The other alternative is to jump to JavaScript and dynamically set the height of C when the page loads, but that can get messy (with respect to a cross-browser solution).

answered Jan 5, 2012 at 20:20

TLS

3,1502 gold badges28 silver badges33 bronze badges

1 Comment

antonjs Over a year ago

To the following link peterned.home.xs4all.nl/examples/csslayout1.html you can get an example how to achieve this result. But it works only if you have one column.

Collectives™ on Stack Overflow

Update container height dynamically using css

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related