Using this example:
/
HTML:
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="content">
<p><b>Main content</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
</div>
<div id="sidebar">
<p><b>Sidebar</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
CSS:
body {
font: normal 16px/1.5em helvetica, arial, sans-serif
}
p {
text-align:center;
}
#container {
width:960px;
margin:0px auto;
}
#header {
text-align:center;
background: #777;
color:#fff;
height:50px;
padding:5px;
}
#content {
float:right;
width:610px;
text-align:center;
background:#ccc;
padding:150px 5px;
}
#sidebar {
float:left;
width:330px;
text-align:center;
height:300px;
background:#eee;
padding:15px 5px;
overflow:auto;
}
#footer {
clear:both;
text-align:center;
background: #555;
color:#fff;
height:50px;
padding:5px;
}
How do I make the "sidebar" 100% of the height of the user's browser (minus 50 pixels to leave room for the header)?
I believe it's possible to get the user's browser height using javascript and insert it dynamically into the css, but I don't know how to do that.
Using this example:
http://jsfiddle/FhWxh/
HTML:
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="content">
<p><b>Main content</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
</div>
<div id="sidebar">
<p><b>Sidebar</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Content
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
CSS:
body {
font: normal 16px/1.5em helvetica, arial, sans-serif
}
p {
text-align:center;
}
#container {
width:960px;
margin:0px auto;
}
#header {
text-align:center;
background: #777;
color:#fff;
height:50px;
padding:5px;
}
#content {
float:right;
width:610px;
text-align:center;
background:#ccc;
padding:150px 5px;
}
#sidebar {
float:left;
width:330px;
text-align:center;
height:300px;
background:#eee;
padding:15px 5px;
overflow:auto;
}
#footer {
clear:both;
text-align:center;
background: #555;
color:#fff;
height:50px;
padding:5px;
}
How do I make the "sidebar" 100% of the height of the user's browser (minus 50 pixels to leave room for the header)?
I believe it's possible to get the user's browser height using javascript and insert it dynamically into the css, but I don't know how to do that.
Share Improve this question edited Oct 20, 2013 at 13:57 bummi 27.4k14 gold badges65 silver badges104 bronze badges asked Jul 28, 2012 at 19:18 GreggGregg 4953 gold badges7 silver badges14 bronze badges 11- window.screen.height/window.screen.availHeight -> both work in js – Shouvik Commented Jul 28, 2012 at 19:20
- 2 Actually it is better and possible to do this only with CSS. I would not advice to use JS for such a trivial thing – d.k Commented Jul 28, 2012 at 19:22
- 100% on height should do, I agree with caligula... – Shouvik Commented Jul 28, 2012 at 19:25
- height:100% does not work correctly – Gregg Commented Jul 28, 2012 at 19:27
- Bet, that it is your markup work incorrectly. – d.k Commented Jul 28, 2012 at 19:29
3 Answers
Reset to default 8Try the following:
$('#sidebar').height($(window).height() - 50)
Div will resize based on browser size
$(window).on('load resize', function(){
$('#div').height($(this).height());
$('#div').width($(this).width());
});
Trying not to use js, is this the sort of effect you wanted? http://jsfiddle/FhWxh/4/
a bit more plete http://jsfiddle/FhWxh/13/show/ the whole content size is set by the wrapper (set to 960px) and the footer and header are fixed into position within this, and the content and sidebar are in the container class you used earlier. Its not perfect but i hope it helps