- February 2012 (2)
- March 2011 (1)
- February 2011 (4)
- November 2009 (1)
- October 2009 (2)
- September 2009 (2)
100% height of DIV elements in CSS.
February 11 / 11
This is something I ran into recently while working on a new version of Precise Modeling website that is going to be launching very soon. As you can see below, the left navigation bar needs to be spanning all the way tot he bottom of the browser window, regardless of user's resolution.
The workaround is actually quite simple and uses good old CSS. Below is how you would do it:
In order to achieve the 100% height, you need to specify both, the HTML and BODY element heights (make them 100%), as well as make the heigh of the DIV you are trying to have span across the screen 100% as well.
HTML portion:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Precise Modeling</title>
<link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="left">Content would go here</div>
</body>
</html>
CSS portion:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#left {
margin: 0;
padding: 0;
width: 200px;
height: 100%;
}
Archive
© Yura Sklyar. Drupal Theme by DrupalStyle | Log in | 
Post new comment