CSS Container Height

Question

I have a layout that should have a sidebar on the right hand side of the content area.

The sidebar should display 100% height of its container (#content), but for an unknown reason this content area doesn't have any height, therefore the sidebar isn't appearing.

Any help is appreciated.

Thanks in advance,

Tom

Here's my code: http://jsfiddle.net/tomperkins/G4f6u/

I'm not seeing a #content div anywhere, maybe you mean .content class? — jondavidjohn, Dec 30 '10 at 15:48
This and li-heights sometimes makes me revert to tables. And min-height isn't supported by some IE-versions, which just makes me hate css now and then... — Teson, Dec 30 '10 at 15:51

score 0 · Answer 1 · answered Dec 30 '10 at 15:49

You are using height: 100% for all elements surrounding it, so it is inheriting the size from the html element. As it doesn't have any size specified, neither does any of the children relying on it.

Use this to make the html and body element fill the window:

html, body { height: 100%; }

score 0 · Answer 2 · answered Dec 30 '10 at 15:52

I made a few changes dealing with the positioning of the sidebar - which I changed to absolute and added a min-height so that if the contents of it were empty it would still be visible.

Link

Not sure if this is what you were looking for - but it might help.

score 0 · Answer 3 · answered Dec 30 '10 at 15:54

0

Set static height on your .content (in px) and you will see the sidebar

answered Dec 30 '10 at 15:54

jondavidjohn

61,812
21
118
158

score 0 · Answer 4 · edited May 23 '17 at 09:58

Here is an answer from a layman: The problem is that you've got two child <div>s which are both floated, meaning they are outside the regular flow of the document. This causes them to be excluded from the height calculations of their parent, in this case, the <div> with class "content".

You may fix this by adding a <div> after those two floats with style "clear:both" (I believe). This is not the "best" way to fix this particular problem, as it is adding non-semantic markup to your page, but it is fairly easy to understand and implement. Cheers!

Edit: see Container div ignores height of floated elements and then follow the link in the answer to read more.

CSS Container Height

4 Answers4

Linked