mbt Posted August 23, 2010 Share Posted August 23, 2010 How to make a div stretch full height?height: 100%; is not working.<!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" lang="en" xml:lang="en"><head> <title>My page title</title></head><body><div style="border: 1px solid black; width: 700px; height: 100%;"></div></body></html> Link to comment Share on other sites More sharing options...
mbt Posted August 23, 2010 Author Share Posted August 23, 2010 I have this code and it's working: <!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" lang="en" xml:lang="en"><head> <link rel="stylesheet" type="text/css" href="css1.css" /> <title>My page title</title></head><body><div style="border-right: 2px solid #aaaaaa; border-left: 2px solid #aaaaaa; width: 700px; height: 100%; margin: 0 auto; background-color: #ffffff;">j</div></body></html> html {height: 100%;}body {margin: 0 0 0 0;height: 100%;background-color: green;} Question is: will this work as expected in all browsers? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2010 Share Posted August 23, 2010 Yea! that on its own will work in all browsers, its when you start adding more, and where you add div content it becomes complicated, as depending where you add div containers will could be an addition to the 100% div height. Link to comment Share on other sites More sharing options...
mbt Posted August 23, 2010 Author Share Posted August 23, 2010 OK, this is new code: <!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" lang="en" xml:lang="en"><head><link rel="stylesheet" type="text/css" href="css1.css" /><title>My page title</title></head><body><div id="container" > <div id="header"></div> <div id="navigation"></div> <div id="main"></div> </div></body></html> html {height: 100%;}body {margin: 0 0 0 0;height: 100%;background-color: green;}#header {background-color: orange;height: 180px;}#container {border-right: 2px solid #aaaaaa;border-left: 2px solid #aaaaaa;width: 700px;height: 100%;margin: 0 auto;background-color:#ffffff;}#navigation {float: left;width: 200px;height: 200px;background-color: red;}#main {float: right;width: 500px;height: 900px;background-color: blue;} How to make #container wrap inner divs (#navigation and #main)? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2010 Share Posted August 23, 2010 1) Because you are using floated elements, the container div can't surround them, unless you use overflow as in overflow:hidden.2) once you used overflow, you will find you are restricted in height to current height of viewport, as in no scroll bars to see the bottom of main div. To fix this you must assign height:auto; OR remove completely, from the container div.3) but this counter react the 100% height of container div when the content of main is small. This is fixed by using min-height:100%; which will force the bottom edge of container to greater or equal than viewport height, but not less than.This should work in all browsers, but with IE6 it does not support min-height so you will have to use a conditional declaration to fix this<!--[if lt IE 7]><style type='text/css'>#container {height: 100%;}</style><![endif]-->remember the viewport is the viewing area, which becomes smaller depending on toolbars added, status bar, scroll bars etc. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 23, 2010 Share Posted August 23, 2010 <!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" lang="en" xml:lang="en"><head><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function showhide(){var container = document.getElementById("main");if(container.offsetHeight=="900"){container.style.height="300px";}else{container.style.height="900px";}}//window.onload=function(){var container = document.getElementById("main"); alert(container.offsetHeight)};/*--*//*]]>*/</script><style type="text/css">html {height: 100%;}body {margin: 0 0 0 0;height: 100%;background-color: green;}#header {background-color: orange;height: 180px;}#container {border-right: 2px solid #aaaaaa;border-left: 2px solid #aaaaaa;width: 700px; margin: 0 auto;background-color:#ffffff;overflow:hidden;min-height:100%;}#navigation {float: left;width: 200px;height: 200px;background-color: red;}#main {float: right;width: 500px;height: 900px;background-color: blue;}</style><!--[if lt IE 7]><style type='text/css'>#container {height: 100%;}</style><![endif]--></head><body><div id="container" > <div id="header"></div> <div id="navigation"></div> <div id="main"><a href="java script:void(null);" onclick="showhide();" style="color:#FFFFFF; "> large/small</a></div> </div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.