47
rated 0 times
[
53]
[
6]
/ answers: 1 / hits: 18026
/ 12 Years ago, sat, july 28, 2012, 12:00:00
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.
More From » jquery
