Jump to content

div 100% height


mbt
 Share

Recommended Posts

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>

Edited by mbt
Link to comment
Share on other sites

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?

Edited by mbt
Link to comment
Share on other sites

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)?

Edited by mbt
Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

<!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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...