#1
  1. No Profile Picture
    jasonc310771
    Guest
    Devshed Newbie (0 - 499 posts)

    How to make div grow to 100% in height ?


    How do I get the 'results' div to be 100% in height ?

    The page height changes depending on the page being shown so need to have the height of the div to be 100%, but using 100% for the div does not make it 100% !

    Any ideas how I do this ?


    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>..</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="language" content="en" />
    <meta name="rating" content="General" />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="2 days" />
    <meta http-equiv="expires" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-language" content="en" />
    
    <style type="text/css">
    /* div { border: 1px solid blue; } */
    
    body { border: 0px solid #A52A2A; background-color: #F2F2F2; } /* brown */
    .outerBody { width: 1150px; margin: 0 auto; }
    .bodyContainer { float: left; width: 1150px; padding: 1px 0 5px 0;		border: 0px solid #A52A2A; }
    
    .menu {					float: left; width: 100%; text-align: center; font-size: 15pt; font-family: Broadway; border: 0px solid #EDB6B6; }
    .widthLimiter{ width: 100%; margin: 0 auto; }
    .menuwidthLimiter{ width: 100%; margin: auto; text-align: center; } /* width: 1200px; */
    
    ul{ list-style: none; padding: 0px; margin: 0px; }
    ul#navbar{ width:auto; list-style: none; padding: 0px; margin: 0px auto; height: auto; overflow: hidden; background-color: #F2F2F2; /* white */   display: table; }
    ul#navbar li, ul#navbar1 li{ float:left!important; display:inline!important; margin: 0px; }
    ul#navbar li a { display:block; float:left;}
    a:link,a:visited,a:active{ color: #757575; font-weight: bold; text-decoration: none; }
    a:hover{ color: #222; text-decoration: underline; }
    #navbar a:link,#navbar a:active,#navbar a:visited{ display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD;  padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */ }
    #navbar a:hover{ background: url('images/headerBarBgHover.png') repeat-x center #999999; display:inline-block; color: #222; text-decoration: underline; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ }
    
    .leftSideImagePanel		{ float: left; width: 30px; height: 100%; overflow: hidden; padding: 0px 5px 0 5px; background-color: #F2F2F2; border: 0px solid #999999; }
    .specials { float: left; width: 180px; height: 100%; overflow: hidden; margin: 15px 5px 0 5px; padding: 5px; border: 0px solid #999999; background-color: #DADADA; border-radius:18px; } /* light grey */
    
    form{ padding: 0px; margin: 0 auto; }
    
    .outerbodycontainer { float: left; width: 870px; height: 100%;		border: 0px solid green; }
    .innerbodycontainer { float: left; width: 870px; height: 100%; border-bottom: 0px solid #EDB6B6; }
    .searchCategoryBox {	border-right: 1px solid #EDB6B6; float: left;	width: 130px; height: 100%; padding: 3px 3px 10px 10px; font-size: 9pt; }
    
    .results { 		border: 1px solid #E5E5E5; float: left; width: 713px; height: 100%; padding: 4px 4px 4px 6px; font-size: 9pt; }
    
    hr.smallDivider { color: #EDB6B6; height: 1px; } /* brown = #A52A2A */
    .catListLineHeight {	line-height: 12px; }
    a.cat { text-decoration: none; }
    a.cat:link {	color: #333333; } /* grey */
    a.cat:visited {	color: #333333; } /* grey */
    a.cat:hover {	color: black; }
    a.activeCat:link {	color: blue; text-decoration: none; }
    
    .clearfloat {			clear: both; }
    .indent {				padding-left: 40px; }
    .center {				text-align: center; }
    .centerTitles { text-align: center; font-weight: bold; font-size: 12pt; }
    </style>
    </head>
    <body>
    
    <div class="outerBody">
    
    
    
    <!-- bodyContainer start -->
    <div class="bodyContainer">
    <img alt="logo" src="images/header-trans.png" height="79" width="1150" />
    	<!-- menu start -->
    	<div class="menu">
        <div class="menuwidthLimiter">
          <ul id="navbar">
    		<li> <a href="index.php">Home</a> </li>
    
    		<li> <a href="cart.php">Our catalogue</a> </li>
    		<li> <a href="cart.php?mycart=yes">View your cart</a> </li>
    		<li> <a href="map.php">Store locations</a> </li>
    		<li> <a href="contactus.php">Contact us</a> </li>
    
    		<li> <a href="aboutus.php">About us</a> </li>
          </ul>
        </div>
    </div>
    	<!-- menu end -->
    <div class="leftSideImagePanel">
    <div style="width: 130px;">&nbsp;</div></div>
    
    <div class="outerbodycontainer">
    <!-- innerbodycontainer start -->
    
    <div class="innerbodycontainer">
    		<!-- search start -->
    			<div class="searchCategoryBox">
    <br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
    <br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
    <br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
    <br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
    <br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
      			</div>
    
    		<!-- search end -->
    
    		<!-- results start -->
    		<div class="results">
    		<br />
    <br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
    <br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
    <br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
    <br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
    <br />
    <br />wanting the 'results' div to be 100% in height.
    		</div>
    		<!-- results end -->
    		<div style="text-align: center; font-weight: bold; font-size: 10pt; font-style: italic;"><br />Prices correct at time of upload.&nbsp;&nbsp;Products, descriptions and prices subject to alteration and/or removal.</div>
    
    </div>
    <!-- innerbodycontainer end -->
    <br class="clearfloat" />
    
    </div>
    
    <div class="rightSideImagePanel">
    	<!-- start of specials -->
    	<div class="specials">specials</div>
    	<!-- end of specials -->
    </div>
    
    
    
    </div>
    <!-- body container end -->
    </div><!-- end of outerBody -->
    </body>
    </html>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Setting a percentage height is tricky.
    Height and Min-Height

    If you don't need to support IE7, then I would recommend you put a wrapper <div> around the ".searchCategoryBox" and ".results" <div>s and then give both "display:table-cell" instead of floating them.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo