100% Height on divs doesnt work

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

100% Height on divs doesnt work

Post by Luke »

How come it is like impossible to make a div span 100% of the height of the screen?? I've got something like this...

Code: Select all

<ul>
 <li>Bla</li>
 <li>Bla</li>
 <li>Bla</li>
 <li>Bla</li>
</ul>
<div id="spantherest">
</div>
with a css file like this...

Code: Select all

#spantherest{
    height: 100%;
}
And no worky... it never works. EVER. How do I get this to work??
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post by neophyte »

It won't ever period. It'll only be 100% of the content inside the container.

Think on that and then read:

http://www.quirksmode.org/css/100percheight.html

And it'll make more sense to you.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Wow... thanks!
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Well that was an excellent read, and I appreciate the help, but now I have another problem.. the navigation bar (div) I was trying to make 100% height is 100% and then some... it is TOO long!! Why is this?

http://www.sierratech.us/paradiseapartments

I see that the bar below the nav list is 100% the screen height, but I can't find a way to fix this... :(
Last edited by Luke on Tue Feb 07, 2006 2:29 pm, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

you didn't put it in a container that'll fill the browser window. It is expanding to the full window height, not just onscreen.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I tried that locally... wrapped a <div id="whole_body"> tag around everything and made it 100%... still doesnt work... what am I doing wrong??
User avatar
Moocat
Forum Contributor
Posts: 143
Joined: Wed Oct 12, 2005 9:28 am
Location: USA

Post by Moocat »

After playing around with it for a bit, I found your "below_menu" is actually expanding to the correct size. There's a few things that could be wrong:

1) You set "left_nav_bar" to an absolute, but set the inside element to relative positioning without using a float or good margin positioning (just 2px margin and another 100%). I set my internal divs to exact heights and let the parent divs surround them.

2) Setting an absolute without a specific height and width is asking for trouble. The ways I've figured out how to "best" set them is to set left AND right dimensions/margins and/or to make sure it has a specific width AND height.

I know these aren't definite answers, nor are they assured to be right (I just took a quick peek) but hopefully it will help you get set down the right path :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I am so close to calling it quits on this non-table design. If it is this smurfing hard to make a menu fill up the page, I am beginning to question the point!! I changed it to not be absolute position... I set up a containing div at 100%... NOTHING WORKS!!!
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

The Ninja Space Goat wrote:I am so close to calling it quits on this non-table design. If it is this smurfing hard to make a menu fill up the page, I am beginning to question the point!! I changed it to not be absolute position... I set up a containing div at 100%... NOTHING WORKS!!!
Take a deep breathe, realize that no one is perfect, and acknowledge that someone else might be able to solve it.

Good. Now, post the code, and let us try to help your specific situation. (The code you posted originally isnt the full page, and clearly, you are looking for specific results from the full page).
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

thank you Roja... here is the code:
HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Paradise Apartments</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <base href="" />
 </head>

 <body onload="setHeight()">
  <div id="contact_bar">
   <div id="keep_width">
    <a href="index.php"><img src="images/home.gif" title="Home" alt="Home" border="0" /></a>
    <a href="contactus.php"><img src="images/contactus.gif" title="Contact Us" alt="Contact Us" border="0" /></a>
    <p>1234 Address Way - Paradise, CA 95969 - (530) 877-1234</p>
   </div>
  </div>

   <div id="title"><a href="index.php"><img src="images/title2.gif" alt="Paradise Apartments" title="Paradise Apartments" border="0" /></a></div>
   <div id="whole_page">
    <div id="left_nav_bar">
     <ul id="left_nav_menu">
      <li><a href="property.php?property=shadowbrook" id="top"><p>Shadowbrook<br />Apartments</p></a></li>
      <li><a href="property.php?property=camino"><p>Camino<br />Apartments</p></a></li>
      <li><a href="property.php?property=nunnely"><p>Nunnely<br />Properties</p></a></li>

      <li><a href="property.php?property=elliot"><p>Elliot<br />Court</p></a></li>
      <li><a href="property.php?property=sawmill"><p>Sawmill<br />Villas</p></a></li>
      <li id="below_menu">&nbsp;<br/></li>
     </ul>
    </div>
    <div id="content">
     <div id="page_title"><h2><span>Paradise Apartments for Rent</span></h2></div>

     <div id="image"><img class="main_image" src="images/temp.jpg" alt="Test Image" /></div>
     <h3>Units presently available:</h3>
     <div class="avail">
        <div class="clear">
         <img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
         <a href="#">Some property</a>
        </div>
        <p><b>Rent:</b> $400/mo</p>

        <p><b>Deposit:</b> $300</p>
     </div>
     <div class="avail">
        <div class="clear">
         <img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
         <a href="#">Some property</a>
        </div>

        <p><b>Rent:</b> $400/mo</p>
        <p><b>Deposit:</b> $300</p>
     </div>
     <div class="avail">
        <div class="clear">
         <img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />

         <a href="#">Some property</a>
        </div>
        <p><b>Rent:</b> $400/mo</p>
        <p><b>Deposit:</b> $300</p>
     </div>

     <div class="avail">
        <div class="clear">
         <img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
         <a href="#">Some property</a>
        </div>
        <p><b>Rent:</b> $400/mo</p>
        <p><b>Deposit:</b> $300</p>

     </div>
     <div class="avail">
        <div class="clear">
         <img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
         <a href="#">Some property</a>
        </div>
        <p><b>Rent:</b> $400/mo</p>

        <p><b>Deposit:</b> $300</p>
     </div>
     <div class="avail">
        <div class="clear">
         <img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
         <a href="#">Some property</a>
        </div>

        <p><b>Rent:</b> $400/mo</p>
        <p><b>Deposit:</b> $300</p>
     </div>
     <div id="text">
      <p><b>We specialize</b> in well-cared-for, quiet, one and two bedroom apartments in Paradise, CA. We accept one small pet at all locations. We have several non-smoking properties.</p>

      <p><b>Our deposits</b> range from $300 to $600 with additional deposits for pets. We require frist month rent and deposit upon move-in.</p>
      <p><b>Please contact the property manager(s)</b> listed on each property's respected page to inquire about our application process and to receive a copy of our uniform rental policies statement.</p>
      <p><b>Lorem ipsum dolor sit amet,</b> consectetuer adipiscing elit. Nulla semper. Pellentesque dolor eros, imperdiet ac, semper non, lacinia a, lectus. Aliquam lacinia vehicula arcu. Vestibulum convallis, massa sed tempor imperdiet, ligula sapien tristique velit, mollis laoreet leo quam ac purus. Phasellus quam. Quisque at risus sit amet quam malesuada tincidunt. Phasellus faucibus libero ut orci. Aliquam mattis elit nec pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pretium enim nec diam. Morbi vehicula tellus et diam. Donec pellentesque consectetuer sapien. Curabitur venenatis. Duis felis. Curabitur interdum ipsum id nulla. Suspendisse faucibus pellentesque mauris.</p>
     </div>

     <div id="footer">
      <p><a href="index.php">Home</a> | <a href="property.php?property=shadowbrook">Shadowbrook</a> | <a href="property.php?property=camino">Camino</a> | <a href="property.php?property=nunnely">Nunnely</a> | <a href="property.php?property=elliot">Elliot</a> | <a href="property.php?property=sawmill">Sawmill</a> | <a href="contactus.php">Contact Us</a></p>

     </div>
    </div>
 </body>
</html>
(Relevant) CSS:

Code: Select all

html{
	margin:0;
	padding: 0;
	height: 100%;
}
body{
	font-family: arial, helvetica, sans-serif;
	font-size: 10pt;
	color: black;
	margin: 0;
	padding: 0;
	height: 100%;
}
h1{
	font-size: 20pt;
	color: #630;
	margin: 0;
	padding: 0;
}
h2{
	color: #630;
	font-size: 14pt;
	margin: 0;
	padding: 0;
}
h3{
	color: #630;
	font-size: 12pt;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
h4{
	font-size: 10pt;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
small{
	font-size: 8pt;
}
a:link{
	color: #630;
	text-decoration: none;
}
a:active{
	color: #630;
	text-decoration: none;
}
a:visited{
	color: #600;
	text-decoration: none;
}
a:hover{
	color: #630;
	text-decoration: underline;
}

/* This is the bar on the top of the site */
#contact_bar{
	font-weight: bold;
	color: white;
	background: transparent url(images/top_bar_bg.gif) repeat-x;
	height: 26px;
	vertical-align: middle;
	text-align: right;
	margin: 0;
	padding: 0;
}
#keep_width{
	float: right;
	width: 600px;
}
#contact_bar p{
	margin: 0;
	padding: 3px ;
}
#contact_bar img{
	padding: 2px 0;
	margin: 0 10px 0 10px;
	float: right;
}

/* This is the menu on the left side of the screen */
#left_nav_bar{
	width: 101px;
	padding-right: 30px;
	float: left;
	height: 100%;
}
#left_nav_menu{
	margin: 0;
	padding: 0;
	height: 100%;
}
#left_nav_menu li{
	list-style-type: none;
	margin: 2px;
	padding: 0;
}
#left_nav_menu p{
	width: 97px;
	padding: 2px;
	margin: 0;
}
#left_nav_menu a{
	color: white;
	font-weight: bold;
	text-decoration: none;
	display: block;
	width: 97px;
	height: 39px;
	background-color: #696;
	border: 2px solid #363;
	text-align: left;
}
#left_nav_menu a:hover{
	color: white;
	font-weight: bold;
	text-decoration: none;
	display: block;
	width: 97px;
	height: 39px;
	background-color: #7A7;
	border: 2px solid #363;
	text-align: left;
}
#left_nav_menu a#top{
	color: white;
	font-weight: bold;
	text-decoration: none;
	display: block;
	width: 101px;
	height: 41px;
	border: none;
	background: transparent url(images/main_menu_top1.gif) no-repeat top left;
	text-align: left;
}
#left_nav_menu a#top:hover{
	color: white;
	font-weight: bold;
	text-decoration: none;
	display: block;
	width: 101px;
	height: 41px;
	border: none;
	background: transparent url(images/main_menu_top2.gif) no-repeat top left;
	text-align: left;
}
#below_menu{
	margin: 2px;
	width: 97px;
	height: 100%;
	background-color: #696;
	border: 2px solid #363;
}

/* Sublist information*/
#sublist{
	margin: 0;
	padding: 0;
}
#sublist li{
	color: white;
	text-decoration: none;
	display: block;
	width: 110px;
	background-color: #696;
	border: 2px solid #363;
	margin: 2px 0;
	padding-left: 5px;
}
#sublist li h1{
	color: #330;
	font-size: 10pt;
}
#sublist p{
	color: #F3FFE3;
	padding: 5px;
}


#page_title{
	margin: 12px 0;
	width: 600px;
	text-align: left;
	border-bottom: 2px solid #363;
}
#page_title span{
	padding: 2px;
	background-color: #696;
	color: white;
	border-top: 2px solid #363;
	border-left: 2px solid #363;
	border-right: 2px solid #363;
	border-bottom: none;
}
#page_title p{
	color: #630;
	font-weight: bold;
	border-top: 2px solid #363;
}

/* This is where content goes*/
#content{
	width: 600px;
	margin: 0;
	padding: 0;
	text-align: left;
	margin-left: 140px;
}
#content p{
	margin: 0;
	padding: 0;
}
#text{
	padding-top: 10px;
}
#text p{
	margin-top: 10px;
}
.avail{
	float: left;
}

.main_image{
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #696;
}
.avail_img{
	border: 1px solid black;
	margin: 5px;
	float: left;
}
.clear{
	clear: both;
}

#footer{
	padding: 20px;
}
#footer p{
	text-align: center;
}
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Ninja Space Goat, I'm not sure I understand what the problem is or what you want to achieve. Is it your intention to let the darker green bar below the menu on the left to continue to the bottom of the viewport?
If so, have you considered working with "faux columns" (repeating background image in parent element)? That's one way I personally work with a lot when something like this is to be achieved. Working with heights can be very difficult - as you have noticed.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

that sounds interesting...
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

This must be how jesus feels...

http://www.sierratech.us/paradiseapartments/test.php

THANK YOU THANK YOU for all of your help everybody!!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Glad you got it working :)
Using faux columns and different background images works very well. Often even no extra code is needed. Like when you have a sidebar div with a <h2> in the top and an <ul> below that, you'll have 3 block level elements to place all kind of borders/backgrounds in.
Post Reply