I have something like this:
+-------------------------------------------+ | -- navigation -- | +------+------------------------------------+ | | | | left | | | side | | | with | | | affix| -- content (white) -- | | menu | | |-black| | | | | | | | | +------------------------------------+ | | -- footer (white) -- | +------+------------------------------------+ as my layout in TB 3.0, and some code:
<body> <header> <div> <divrow"> <div>-- left side with black background here --</div> <div> <div> <div>-- content with white background here --</div> </div> <div> <div>-- footer (height = 50px) with white background here --</div> </div> </div> </div> </body> I want make my left side (with black background) and content (white background) with height = 100% of my browser window and footer (white background) below my content to be visible (also on scroll).
For now, I get height of last element of the side. If my content is short, it ends for example in the center of vertical side of my browser.
23 Answers
Pure CSS Solution (using calc)
If you can use CSS3, and this 50px height is static, you can use calc to achieve your layout.
Here's a DEMO
HTML
<header> Header </header> <div> <div>I'm in the left menu</div> <div> <div>Content</div> <footer>Footer</footer> </div> </div> CSS
* { padding: 0; margin: 0; } html, body { height: 100%; } header, footer { height: 50px; background-color: yellow; text-align: center; } #Container, #Content { height: calc(100% - 50px); overflow: auto; } #Left, #Right { height: 100%; } #Left { float: left; background-color: black; color: white; } #Right { overflow: auto; } If the height is not static, I have another solution for you, that I demonstrate here it's not excatly your layout, but it can be done the same way.
1See if this example helps you out:
It basically wraps the columns in a container, sets 100% height, and makes the navbar, sidebar and footer position:fixed
Your problem seems the footer only? (or content height). Set the footer fixed / sticky () when your content is too small by jquery.
something like:
html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ .wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ .footerfixed { height: 60px; background-color: #f5f5f5; } javascript:
if ($(window).height() > ($('#content').innerHeight() + $('#navigation').innerHeight() + $('#footer').innerHeight() )) { $('#content').addClass('wrap'); $('#footer').addClass('footerfixed'); } Their seems no (or see: ) pure CSS solution to fix this, see: Sticky header, sticky footer (variable height), fluid middle?
