CODEWITHSUNDEEP
css
antonjs
antonjs

Reputation: 14318

Update container height dynamically using css

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

Upvotes: 1

Views: 151

Answers (3)

antonjs
antonjs

Reputation: 14318

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.

Upvotes: 2

TLS
TLS

Reputation: 3150

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).

Upvotes: 0

Lee
Lee

Reputation: 921

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

Upvotes: 0

Related Questions