jasonc Posted July 26, 2011 Share Posted July 26, 2011 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 ? <!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;"> </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. 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> Quote Link to comment https://forums.phpfreaks.com/topic/242827-how-to-make-div-grow-to-100-in-height/ Share on other sites More sharing options...
AyKay47 Posted July 26, 2011 Share Posted July 26, 2011 can you post just the div in question please..Is the div inside of another div? Quote Link to comment https://forums.phpfreaks.com/topic/242827-how-to-make-div-grow-to-100-in-height/#findComment-1247304 Share on other sites More sharing options...
jasonc Posted July 26, 2011 Author Share Posted July 26, 2011 http://testingsite.freehostingcloud.com/ Quote Link to comment https://forums.phpfreaks.com/topic/242827-how-to-make-div-grow-to-100-in-height/#findComment-1247316 Share on other sites More sharing options...
remybink Posted July 31, 2011 Share Posted July 31, 2011 a link to the website would be nice too Quote Link to comment https://forums.phpfreaks.com/topic/242827-how-to-make-div-grow-to-100-in-height/#findComment-1249679 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.