100% Height?

**Alex** · Aug 24, 2004, 17:22

www.shockedstyle.com

How can I make the height of the site 100%?

**dtang4** · Aug 24, 2004, 18:36

Not sure if this is the solution you're looking for, but you can use javascript to grab the height of the window (i.e. window.height) and set a particular element to that height.

**mate** · Aug 24, 2004, 21:10

Some CSS hacks are necessary to make height:100% work cross-browser. The solution will depend on what you are trying to achieve - for example, do you want to position a footer at the bottom of the page?

Have a look at the CSS-Discuss Wiki to find the solution to the situation that best matches your own. (In my experience there is no perfect solution - somewhere along the line you may lose a browser or two and it's a matter of setting priorities.)

mate. :-)

**Paul O'B** · Aug 25, 2004, 07:17

Hi,

Originally Posted by mate

Have a look at the CSS-Discuss Wiki to find the solution to the situation

No need to go the that far (even though 2 of my layouts are on that list anyway lol (and that's a great resource and worth a visit anyway)). I have put up a FAQ in the sticky thread that explains 100% in depth and I believe it to be one of the best methods about and most other methods have in fact been copied from my code anyway (not to boast of course)

.

There is also a FAQ on how to keep the footer at the bottom and various methods explained n the three column demo sticky thread.

That's enough to keep anyone busy for a while!

Anyway Yuneek here is an example of your page with 100% height added in.

There are three things to remember.

1) 100% height can only be inherrited from the html,body elements and further nestings collapse to height auto. That means only one element can really carrry the 100% height ans the whole page (with the exception of the footer must go inside this outer.

2) The negative margin bottom on the main wrapper must match the height of the footer content.

3) You must clear the bootm footer by either allowing padding on the elements above or by use aof an empty div of specific height as in the example below.

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">
<head>
<title>.::SHOCKEDSTYLE::. The Next Generation Of Webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="ShockedStyle ( @ latentmedium.com)" />
<meta name="copyright" content="Copyright 2004 ShockedStyle" />
<meta name="description" content="A web standard compliant design studio with tutorials, articles, design, forums and more!" />
<meta name="distribution" content="Global" />
<meta name="keywords" content="Shocked, Style, Media, Design, Web, Graphics, Tutorials, Articles" />
<meta http-equiv="content-language" content="EN-US" />
<meta name="revisit-after" content="2 Days" />
<meta name="robots" content="All" />
<style>
/* commented backslash mac hiding hack  \*/ 
html, body{height:100%;} 
/* end hack */ 
html,body {margin:0;padding:0;}
body {
  background-color: #DEDEDE;
  margin: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding: 0px;
}
p {
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 10px;
  color: #555555;
	 text-align: justify;
}
h1 {
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 10px;
  font-weight: bold;
  color: #B00000;
	 text-align: justify;
  margin-top: 17px;
}
img {
	border: 0px;
}
div.header {
	 width: 660px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  border-top: 5px solid #B00000;
  border-bottom: 1px solid #8A8A8A;  
  background-color: #FFFFFF;
  padding: 15px 0px 15px 0px;
}
div#headerspace{height:30px}/*mozilla needs this*/
div.bg {
	 width: 730px;
	 min-height: 100%;
  background-image:  url(http://www.shockedstyle.com/img/bg.gif);
  background-repeat: repeat-y;
	 padding-left: 20px;
 margin-bottom:-80px;/* make room for footer - same as footer height*/
}
* html div.bg {height:100%}
div.main {
		 min-height: 300px;
  width: 660px;
  padding-top: 30px;
}
* html div.main {height:300px}
* html div.content {height:300px}
div.content {
min-height: 300px;
width: 400px;
float: left;
padding-bottom: 20px;
line-spacing: 2px;
}
div.side {
	 height: auto;
  width: 220px;
	 float: right;
  padding-right: 10px;
  padding-bottom: 40px;
}
div.footer {
	 width: 660px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  border-top: 5px solid #B00000;
  border-bottom: 1px solid #8A8A8A;  
  background-color: #FFFFFF;
  padding: 12px 0px 12px 0px;
  clear: both;
}
a.copy:link {
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 10px;
  color: #B00000;
  text-decoration: none;
}
a.copy:visited {
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 10px;
  color: #B00000;
  text-decoration: none;
}
a.copy:hover {
	 font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 10px;
  color: #B00000;
  text-decoration: underline;
}

div.copyright {
	 width: 660px;
  line-height: 30px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
	 font-size: 10px;
  color: #444444;
  text-align: center;
  vertical-align: middle;
}
/* Begin Navigation */
a.navi:link {
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  border-left: 1px solid #777777;
  padding: 0px 10px 0px 10px;
}
a.navi:visited {
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  border-left: 1px solid #777777;
  padding: 0px 10px 0px 10px;
}
a.navi:hover {
  font-weight: bold;
  color: #B00000;
  text-decoration: none;
  border-left: 1px solid #777777;
  padding: 0px 10px 0px 10px;
}
a.navir:link {
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  border-left: 1px solid #777777;
  border-right: 1px solid #777777;
  padding: 0px 10px 0px 10px;
}
a.navir:visited {
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  border-left: 1px solid #777777;
  border-right: 1px solid #777777;
  padding: 0px 10px 0px 10px;
}
a.navir:hover {
  font-weight: bold;
  color: #B00000;
  text-decoration: none;
  border-left: 1px solid #777777;
  border-right: 1px solid #777777;
  padding: 0px 10px 0px 10px;
}
/* home */
a.buttonh {
background: url("http://www.shockedstyle.com/img/home1.gif") 0 0 no-repeat;
display: block;
height: 36px;
width: 71px;
float: left;
}
a.buttonh:hover {
background-position: -71px 0;
}
/* /home */
/* portfolio */
a.buttonp {
background: url("http://www.shockedstyle.com/img/portfolio1.gif") 0 0 no-repeat;
display: block;
height: 36px;
width: 70px;
float: left;
}
a.buttonp:hover {
background-position: -70px 0;
}
/* /portfolio */
/* articles */
a.buttona {
background: url("http://www.shockedstyle.com/img/articles1.gif") 0 0 no-repeat;
display: block;
height: 36px;
width: 70px;
float: left;
}
a.buttona:hover {
background-position: -70px 0;
}
/* /articles */
a.buttont {
background: url("http://www.shockedstyle.com/img/tutorials1.gif") 0 0 no-repeat;
display: block;
height: 36px;
width: 70px;
float: left;
}
a.buttont:hover {
background-position: -70px 0;
}
/* forum */
a.buttonf {
background: url("http://www.shockedstyle.com/img/forum1.gif") 0 0 no-repeat;
display: block;
height: 36px;
width: 70px;
float: left;
}
a.buttonf:hover {
background-position: -70px 0;
}
/* /forum */
/* contact */
a.buttonc {
background: url("http://www.shockedstyle.com/img/contact1.gif") 0 0 no-repeat;
display: block;
height: 36px;
width: 70px;
float: left;
}
a.buttonc:hover {
background-position: -70px 0;
}
/* /contact */
/* End Navigation */
div.header a, div.header img  {vertical-align:middle}
html > body  #minHeight{float:left;width:0px;height:100%;margin-bottom:-80px;} /*safari wrapper for 100% height*/
#outerfooter{height:80px}/*outer footer must have height*/
.clearer {/*make room for footer*/
 height:80px;/* match height of footer and copyright*/
 clear:both;
}
</style>
</head>
<body>
<div id="minHeight"></div>
<div class="bg"> 
  <div id="headerspace"></div>
  <div class="header"> <a href="http://www.shockedstyle.com" class="buttonh"></a> 
	<a href="navi.htm" class="buttonp"></a> <a href="navi.htm" class="buttona"></a> 
	<a href="navi.htm" class="buttont"></a> <a href="navi.htm" class="buttonf"></a> 
	<a href="navi.htm" class="buttonc"></a> &nbsp; &nbsp; &nbsp; <img src="http://www.shockedstyle.com/img/logo.gif" alt="ShockedStyle" title="ShockedStyle" /> 
  </div>
  <div class="main"> 
	<div class="content"><img src="http://www.shockedstyle.com/img/content.gif" title="Content" alt="Content" /> 
	  <p> 
	  <h1>Introduction</h1></p>
	  <p>Welcome to ShockedStyle, a new web design firm, among the many. We also 
		offer a community for programmers and designers to learn, ask questions 
		and help others. While today's internet has high demands within the web 
		design industry, we have come to find our staff worthy of the high demands 
		of current standards and extraordinarily cost effective. ShockedStyle 
		is quite possibly among the most reasonable advanced development team 
		on the internet.</p>
	  <em>ShockedStyle Team</em> </div>
	<div class="side"><img src="http://www.shockedstyle.com/img/articles-head.gif" title="Articles" alt="Articles" /><br />
	  <h1>Just a title</h1>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
		Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
		dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
		dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
		te feugait nulla facilisi.</p>
	</div>
  </div>
  <div class="clearer"></div>
</div>
<div id="outerfooter"> 
  <div class="footer"> <a href="index.htm" class="navi">HOME</a> <a href="index.htm" class="navi">PORTFOLIO</a> 
	<a href="index.htm" class="navi">ARTICLES</a> <a href="index.htm" class="navi">TUTORIALS</a> 
	<a href="index.htm" class="navi">FORUM</a> <a href="index.htm" class="navir">CONTACT</a> 
  </div>
  <div class="copyright">Copyright © 2004 ShockedStyle. <a href="http://validator.w3.org/check?uri=referer" class="copy">XHTML</a>, 
	<a href="http://jigsaw.w3.org/css-validator/check/referer" class="copy">CSS</a>.</div>
</div>
</body>
</html>

As Mate said above you will loose a few browsers on the way most notably ie mac (i can do ie mac with 100% height but relies on html 4.01 doctype without uri and a couple of extra nestings but hardly seems worth the bother.)

The code above will work in about 95% browsers but should cause little harm in the others.

The dimensions are critical as mentioned above and must match up as explained. However the technique seems quite robust and has been used anumber of times successfully.

Hope that helps.

Paul

The SitePoint Forums have moved.

User Tag List

Thread: 100% Height?

Thread Tools

Display

100% Height?

Bookmarks

Bookmarks

Posting Permissions