Div's question

**Halbarad** · 05-18-2006, 09:59 AM

Hi,

I am starting building tableless layouts and i was wondering.

how do i get a div to span the complete height(100% height) of the site?

Jaap Bakker
Bloem Media

**Minaki** · 05-18-2006, 10:37 AM

With difficulty...
You need to set either the HTML element or the Body element to 100% height (can't remember which it was):

Code:

 
body {
   height: 100%;
}

then you can set the DIV to be 100% of the height of the body, which should now be 100% of the viewport.

As far as I remember from when I tried this though, it's pretty hard to work with in some situations, I think it messes up when you resize the browser window.

**vangogh** · 05-18-2006, 03:56 PM

I think it works unless the page is long enough to go past the window size (since it's then greater than 100%) and then it has problems with the resize. It might only be IE that has the issue though I could be wrong.

I agree though that it can be hard to work with. I prefer just getting various elements and divs to be 100% of the overall container instead of the window.

I think you're right too about it just being the body where you need to add the 100% and the div inside of course.

**pjb007** · 09:37 AM

I am doing this and am having problems, the result is that the pages goes beyond the end of the screen, when there is not enough content for it to do so.

css (only relevent bits included)

Code:

html {
 height: 100%;
 }

.heightset {
 height:100%;
 }

body{
 margin:0 auto;
 padding:0;     
 background:#DDECFE;
 color:#333333;
 width:700px;
 height:100%;
 }
 	
#hdr{
 width: 100%;
 margin: 0;
 border-width: 0 0 0 0;
 background: #eeeeee;
 color: #333333;
 }
   
#lh-col{
 width:75%;
 height:100%;
 float:left;
 border:solid #333333;
 border-width:0 0 0 0;
 background:#ffffff;
 color:#333333;
 margin:0;
 padding:10px;
 }

#rh-col{
 background: #c0c0c0;
 color: #333333;
 margin: 0;
 border: 0;
 padding: 10px;
 margin-left:32em;
 }

Page template (excluding head)

Code:

<body>
<div class="heightset">

	<!-- start of header -->
	<div id="hdr"><? include('ssi/top.php'); ?></div>
	<!-- end of header -->

	<!-- start of left column -->
	<div id="lh-col">
  		<p class="lefttitle">Title</p>
  		<p class="lefttext">
		Main text here
		</p>
	</div>
	<!-- end of left column -->

	<!-- start of right column -->
	<div id="rh-col">
		<div class="righttitle">Title</div> 
		<div class="righttext">Details</div>
	</div>
	<!-- end of right column -->
</div>
</body>

**LadynRed** · 05-23-2006, 09:52 AM

I guess I don't understand everyone's obsession with this. Trust me, users don't care, it's the content that matters to them. As a designer I understand wanting it to look just the way you want it, but in the end you just have to let go of this pixel-perfect idea - you'll drive yourself around the bend.

I almost always use the faux-columns method to make columns appear equal length and I don't bother with trying to make it fill the entire window vertically. There are problems with all the 100% methods, and they're easy to avoid.