Page 1 of 1

100% Height on divs doesnt work

Posted: Wed Feb 01, 2006 4:28 pm
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??

Posted: Wed Feb 01, 2006 4:40 pm
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.

Posted: Wed Feb 01, 2006 4:56 pm
by Luke
Wow... thanks!

Posted: Tue Feb 07, 2006 2:24 pm
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... :(

Posted: Tue Feb 07, 2006 2:28 pm
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.

Posted: Tue Feb 07, 2006 2:34 pm
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??

Posted: Tue Feb 07, 2006 3:25 pm
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 :)

Posted: Tue Feb 07, 2006 4:46 pm
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!!!

Posted: Tue Feb 07, 2006 5:11 pm
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).

Posted: Tue Feb 07, 2006 6:29 pm
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;
}

Posted: Wed Feb 08, 2006 2:46 am
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.

Posted: Wed Feb 08, 2006 10:44 am
by Luke
that sounds interesting...

Posted: Wed Feb 08, 2006 1:48 pm
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!!

Posted: Wed Feb 08, 2006 3:13 pm
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.