Jump to content

CSS 100% Height DIV Problem

kwilliams

By kwilliams
in CSS

Recommended Posts

kwilliams Member

kwilliams

Posted
Posted

I found this great tutorial at titled "CSS 100% Height DIV's tutorial" at http://www.webmasterworld.com/forum83/200.htm, which seemed to solve my problem. I'm creating a new site with a three column design, a header, and a footer. When I copied and pasted the code into my page, it worked great in IE6, IE7 and Firefox.So I then entered code for a header and a footer, and it again worked great in all three browsers. But when I tested it out by entering a bunch of <br />, the footer didn't stay at the bottom of the page.If anyone can look at the code below, and let me know what I'm doing wrong, it would be greatly appreciated. Thanks for any help.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><title>One Hundred Percent Height Divs</title><!-- Original code from: http://www.webmasterworld.com/forum83/200.htm --><style type="text/css" media="screen">body {margin:0;padding:0;height:100%; /* this is the key! */}#header {position:absolute;height: 50px;background-color: #EAEAEA;border:1px solid #333;padding:4px;} #left {position:absolute;left:0;top:0;padding:0;width:200px;height:100%; /* works only if parent container is assigned a height value */color:#333;background:#eaeaea;border:1px solid #333;}#content {position:static;margin-left:220px;margin-right:220px;margin-bottom:20px;color:#333;background:#ffc;border:1px solid #333;padding:0 10px;}#right {position:absolute;right:0;top:0;padding:0;width:200px;height:100%; /* works only if parent container is assigned a height value */color:#333;background:#eaeaea;border:1px solid #333;}#footer {	position:absolute;	left:0;	background-color:#000;	width:100%;	top:100%;	height:60px;	text-align:right;	color:#FFF;}#left p {padding:0 10px;}#right p {padding:0 10px;}p.top {margin-top:20px;}</style></head><body><div id="header"><p>Here is the header: 50px high, no positioning.</p></div><div id="left"><p class="top">This design uses a defined body height of 100% which allows setting thecontained left and right divs at 100% height.</p><p>This design uses a defined body height of 100% which allows setting the contained left andright divs at 100% height.</p><p>This design uses a defined body height of 100% which allows setting the contained left andright divs at 100% height.</p></div><div id="content"><p>This design uses a defined body height which of 100% allows setting the contained left andright divs at 100% height.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p></div><div id="right"><p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.topusing margin-top:20; is applied to the first paragraph of each outer divs.</p><p>This design uses a defined body height which of 100% allows setting the contained left andright divs at 100% height.</p><p>This design uses a defined body height which of 100% allows setting the contained left andright divs at 100% height.</p></div><div id="footer"><p>This is the footer.</p></div></body></html>

Link to comment
Share on other sites
ste Member

ste

Posted
Posted

try this instead:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><title>One Hundred Percent Height Divs</title><style type="text/css" media="screen">html, body {margin:0;padding:0;height:100%;}#wrap	{position: relative;min-height: 100%;}* html #wrap {height: 100%;}#header {position:absolute;height: 50px;background-color: #EAEAEA;border:1px solid #333;padding:4px;}#left {position:absolute;left:0;top:0;padding:0;width:200px;height:100%; min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;}#content {position:static;margin-left:220px;margin-right:220px;margin-bottom:20px;color:#333;background:#ffc;border:1px solid #333;padding:0 10px;}#right {position:absolute;right:0;top:0;padding:0;width:200px;height:100%; min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;}#footer {position: relative;margin: -60px auto 0 auto;background-color:#000;width:100%;height:60px;text-align:right;color:#FFF;}#left p {padding:0 10px;}#right p {padding:0 10px;}p.top {margin-top:20px;}</style></head><body>	<div id="wrap">		<div id="header">	<p>Here is the header: 50px high, no positioning.</p>	</div><div id="left">	<p class="top">This design uses a defined body height of 100% which allows setting the	contained left and right divs at 100% height.</p>	<p>This design uses a defined body height of 100% which allows setting the contained left and	right divs at 100% height.</p>	<p>This design uses a defined body height of 100% which allows setting the contained left and	right divs at 100% height.</p></div> <div id="content">	<p>This design uses a defined body height which of 100% allows setting the contained left and	right divs at 100% height.	</p>	<br />	<br />	<br />	<br /></div><div id="right">	<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top	using margin-top:20; is applied to the first paragraph of each outer divs.</p>	<p>This design uses a defined body height which of 100% allows setting the contained left and	right divs at 100% height.</p>	<p>This design uses a defined body height which of 100% allows setting the contained left and	right divs at 100% height.</p>	</div> </div><div id="footer">	<p>This is the footer.</p></div></body></html>

Link to comment
Share on other sites
kwilliams Member

kwilliams

Posted
  • Author
Posted

Wow, that works great. Thanks for the quick reply.My next step would be to have the header go all the way across the screen, and have the height at 154px, while keeping the footer at the bottom of the screen. Adding a 100% width to the #header worked for the width issue, but I'm having a problem when revising the height. This is what happened when I tried to revise the code:Case #1:#header {position:absolute;height: 154px; /*<-----THIS IS A REVISION */background-color: #EAEAEA;border:1px solid #333;width:100%; /*<-----THIS IS A REVISION */}#left {position:absolute;left:0;top:154px; /*<-----THIS IS A REVISION */padding:0;width:200px;height:100%;min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;}#content {position:static;margin-left:220px;margin-right:220px;margin-bottom:20px;color:#333;background:#ffc;border:1px solid #333;padding:0 10px;}#right {position:absolute;right:0;top:154px; /*<-----THIS IS A REVISION */padding:0;width:200px;height:100%;min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;}Case #2:#header {position:relative;height: 154px; /*<-----THIS IS A REVISION */background-color: #EAEAEA;border:1px solid #333;width:100%; /*<-----THIS IS A REVISION */}#left {position:absolute;left:0;top:0;padding:0;width:200px;height:100%;min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;margin-top:154px; /*<-----THIS IS A REVISION */}#content {position:static;margin-left:220px;margin-right:220px;margin-bottom:20px;color:#333;background:#ffc;border:1px solid #333;padding:0 10px;}#right {position:absolute;right:0;top:0;padding:0;width:200px;height:100%;min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;margin-top:154px; /*<-----THIS IS A REVISION */}Result of both: The header looks great, but the footer is now above the left and right columns by 154px.I realize that I'm probably going about it the wrong way, so if you could please help to point me in the right direction, that would be great. Thanks again for your help.

Link to comment
Share on other sites
kwilliams Member

kwilliams

Posted
  • Author
Posted

Ah, I've figured it out:)This is the revised code that works great, for anyone that would like to see it. Thanks again for your help ste!

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><title>One Hundred Percent Height Divs</title><style type="text/css" media="screen">html, body {margin:0;padding:0;height:100%;}#wrap	{position: relative;min-height: 100%;}* html #wrap {height: 100%;}#header {background-color: #EAEAEA;border:1px solid #333;height:154px;width:100%;}#left {position:absolute;left:0;top:0px;padding:0;width:200px;height:100%;min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;}#content {position:static;margin-left:220px;margin-right:220px;margin-bottom:20px;color:#333;background:#ffc;border:1px solid #333;padding:0 10px;}#right {position:absolute;right:0;top:0px;padding:0;width:200px;height:100%;min-height: 100%;color:#333;background:#eaeaea;border:1px solid #333;}#footer {position: relative;margin: -60px auto 0 auto;background-color:#000;width:100%;height:60px;text-align:right;color:#FFF;}#left p {padding:0 10px;}#right p {padding:0 10px;}p.top {margin-top:20px;}</style></head><body>			<div id="header">	<p>Here is the header: 50px high, no positioning.</p>	</div><div id="wrap"><div id="left">	<p class="top">This design uses a defined body height of 100% which allows setting the	contained left and right divs at 100% height.</p>	<p>This design uses a defined body height of 100% which allows setting the contained left and	right divs at 100% height.</p>	<p>This design uses a defined body height of 100% which allows setting the contained left and	right divs at 100% height.</p></div><div id="content">	<p>This design uses a defined body height which of 100% allows setting the contained left and	right divs at 100% height.	</p>	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br />	<br /></div><div id="right">	<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top	using margin-top:20; is applied to the first paragraph of each outer divs.</p>	<p>This design uses a defined body height which of 100% allows setting the contained left and	right divs at 100% height.</p>	<p>This design uses a defined body height which of 100% allows setting the contained left and	right divs at 100% height.</p>	</div></div><div id="footer">	<p>This is the footer.</p></div></body></html>

Link to comment
Share on other sites
kwilliams Member

kwilliams

Posted
  • Author
Posted

The 3-column design with a header and a footer is still working great, but I'm having two related problems:1) The footer shows up at the bottom of the page in both Firefox and IE 6.0, but the left and right columns are not going all the way to the bottom in IE 6.0.2) I've created a popup menu to go with this site, but it's showing up behind the content section.I'm including my current code at the bottom of this post. If anyone can see what I need to change to make this work properly, that would be wonderful. Thanks for any and all help.default.aspx

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" Debug="True" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head runat="server">	<title>Three Column Design</title>	<link rel="stylesheet" type="text/css" media="screen" href="~/docs/css/screen.css" />	<link rel="stylesheet" type="text/css" media="screen" href="~/docs/css/menu.css" />	<script language="javascript" type="text/javascript" src="/bgscripts/js/iefixes.js"></script></head><body>	<div id="header">	This is the header section			<div id="navlist">			<ul id="nav">				<li class="root"><a href="sectionA.aspx">Section A</a>					<ul>							<li class="subtab"><a href="page1.aspx">Page 1</a></li>						<li class="subtab"><a href="page2.aspx">Page 2</a></li>						<li class="subtab"><a href="page3.aspx">Page 3</a></li>					</ul>				</li>				<li class="root"><a href="sectionB.aspx">Section B</a>					<ul>							<li class="subtab"><a href="page1.aspx">Page 1</a></li>						<li class="subtab"><a href="page2.aspx">Page 2</a></li>						<li class="subtab"><a href="page3.aspx">Page 3</a></li>					</ul>				</li>				<li class="root"><a href="sectionC.aspx">Section C</a>					<ul>							<li class="subtab"><a href="page1.aspx">Page 1</a></li>						<li class="subtab"><a href="page2.aspx">Page 2</a></li>						<li class="subtab"><a href="page3.aspx">Page 3</a></li>										</ul>				</li>			</ul>		</div>	</div><!-- end header -->	<div id="wrapper">	<div id="screenleftnav">		This is the left column section	</div><!-- end screenleftnav -->	<div id="content">		This is the content section	</div><!-- end content -->	<div id="right">		This is the right column section	</div><!-- end right -->	</div><!-- end wrapper -->	<div id="footer">	This is the footer section	</div><!-- end footer --></body></html>

screen.css

/* Main HTML Properties */html {	font-size:62.8%;	margin:0;	padding:0;	height:100%;}body {	font-family:arial, helvetica, sans-serif;	font-size:1.2em;	margin:0;	padding:0;	height:100%; /* this is the key! */	color:#000;	background-color:#FFF;}#wrapper	{	position:relative; /*makes menus 100% height*/	min-height: 100%;	margin-top:-10px;	-margin-top:0px;}* html #wrapper {	height: 100%;}#header {	width:100%;	background-color: #FFF;	border:0px;/*???*/	height:122px;	width:100%;	margin-top:0px;}#content {	position:static;	margin:0px 204px 0px 129px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/	border:0;	padding-top:10px;}#right {	position:absolute;	right:0;	top:0px;	padding:0;	width:194px;	height:100%;	min-height: 100%;	color:#333;	background-image:url(/images/gif/rightcolumn_lines.gif);	background-repeat:repeat;	border:0;}#footer {	position: relative;	margin: 0px auto 0 auto; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/	background-color:#000;	width:100%;	height:60px;	text-align:right;	color:#FFF;}#left p {	padding:0 10px;}#right p {	padding:0 10px;}p.top {	margin-top:20px;}/*Left Navigation Properties */#screenleftnav {	position:absolute;	left:0;	top:0px;	padding:0;	width:120px;	height:100%;	min-height: 100%;	margin-top:40px;	-margin-top:30px;	color:#FFF;	background-color:#000;	border-right: 3px solid #900; /*'border-right-width' 'border-right-style' 'border-right-color'*/}#screenleftnav ul {	padding:0px; /*removes indent Mozilla and NN7*/	list-style-type:none; /*turns off display of bullet*/	text-align:center;	margin:15px 0px 0px 0px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/}#screenleftnav li {	display:inline;}#screenleftnav a {	display:block;	background-color:#99C;	padding:1px 1px 1px 1px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left*/	border-bottom:1px solid #000;/*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/}#screenleftnav a:link, #screenleftnav a:visited {	color:#FFF;	text-decoration:none;	}#screenleftnav a:hover, #screenleftnav a:active {	background-color:#CCF;	color:#003;}

menu.css

/*Menu Properties*/#navlist {	width:auto;	margin-left:10px;}#nav, #nav ul { /* all lists */	padding: 0px;	margin:0; 	list-style: none;	line-height: 1;}#nav a {	display:block;	width:auto;	text-decoration:none;	font-size:1.0em;	padding:2px 0px 2px 2px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left'*/	color:#FFF;/* white */}#nav a:hover,#nav a.hover {	color:#000;/* black */	background-color: #CCF; /* light blue */}.root {	border:1px solid #306; /*'border-width' 'border-style' 'color'*/	text-align:center;	background-color: #99C; /* light blue */	color:#FFF;/* white */}.hassub {	background: url(/images/arrows.gif) no-repeat right;}	#nav li { /* all list items */	float: left;	width: 110px; /* width needed or else Opera goes nuts */}#nav li ul { /* second-level lists */	position: absolute;	background-color: #99C; /* light blue */	width: 110px;	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */	border: 1px solid #306;/*'border-width' 'border-style' 'color'*/	text-align:left;	*margin-left:-46px; /* for IE5.5+ only */	margin-top:3px;	color:#FFF;	}.subtab {	border-bottom:1px solid #FFF;/*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/}#nav li ul ul { /* third-and-above-level lists */	margin: -1em 0 0 92px;	*margin-left: 92px; /* for IE5.5+ only */}#nav li:hover, #nav li.hover { /* List Hover Properties */	background-color: #CCF; /* light blue */	display: inline;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {	left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */	left: auto;}

iefixes.js (makes it work in IE 6.0)

<!--//--><![CDATA[//><!--sfHover = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {		sfEls[i].onmouseover=function() {			this.className+=" sfhover";		}		sfEls[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");		}	}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...