Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    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
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Height in percentage is depends on height of it's parent element if defined. If no height defined for parent element then it will not work and height will be auto only


  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by vikram1vicky View Post
    Height in percentage is depends on height of it's parent element if defined. If no height defined for parent element then it will not work and height will be auto only

    i added

    height: 100%;

    to all the parent div containers but still it is not 100%

    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; height: 100%; } /* brown */
    .outerBody { height: 100%; width: 1150px; margin: 0 auto; }
    .bodyContainer { float: left; height: 100%; 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>

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Why are you assign 100% height all elements?? It wont work. It will keep it's height auto only.


  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I don't understand what you are wishing to achieve by setting the height to 100%?
    If it's what I think, maybe you could try setting a 'max-height' in a container?

    Either that, or you could set the height to 580px and add a max-height for expansion?
    Last edited by JustinJD; 07-26-2011 at 12:22 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    please check the following link..

    http://testingsite.freehostingcloud.com/

    refresh it a few times to see that the main contant changes in height and the text at the bottom i am wanting inside the 'results' div but at the bottom of in.
    'Prices correct at time of upload. Products, descriptions and prices subject to alteration and/or removal.'

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by jasonpc1 View Post
    please check the following link..

    http://testingsite.freehostingcloud.com/

    refresh it a few times to see that the main contant changes in height and the text at the bottom i am wanting inside the 'results' div but at the bottom of in.
    'Prices correct at time of upload. Products, descriptions and prices subject to alteration and/or removal.'

    Please clear that what you want to achieve or what is issue with your page in detail and screenshot

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Location
    India
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Please try overflow:auto along with height:100%

  • #9
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    i just added the
    Code:
    overflow:auto;
    to the result div but still the same thing.

    here is a mock screen shot of the sort of look i am after.
    Attached Thumbnails Attached Thumbnails how to make div grow to 100% in height ?-results-views.jpg  

  • #10
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Share the mockup,how your site should be and it is looking now with code

  • #11
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i think your signature may be warding off those who arre willing to help you... i know i thought more than twice about not responding bc my response is in confliction with you signature
    Please let me know the answer to my question before questioning it. If you must question please add your thoughts as a foot note to any replies.

    (I am open to criticism but still wanting to know the answers)
    but i thought i'd throw you my answer anyways... i personally never use % based layouts... they are a pain in the * and i always have issues with them...
    a question i have to you in regards of design is will that middle area always be that big? and will that side area always be that big? i think after you remove all those text text <br/> lines you will probably find that that side bar also does not play as it should... I would suggest making fixed height containers and letting the info scroll, or alternatively set a min-height and then let it open for expansion when more content gets added

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try setting

    Code:
    html, body {
     height: 100%;
    }
    you realize that some screens have heights that are twice as large as yours, so setting a div to 100% height should only be used for "overlays" like an opacity layer. (ie: when you click on an fb image).

    I agree with alykins, sometimes the answer isnt in black and white
    Last edited by Sammy12; 07-27-2011 at 04:34 PM.

  • #14
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Sammy Using your suggestion all be it a little change actaully done something to the page, it increased the height of the 'results' div, but not the height of the main body, i have been playing around with the page a bit more and adding in borders to all divs and found that the page is not a good as i first thought it was, inner divs jumping out of their containers!

    seems like a complete rewrite is needed...

    what i was after is a logo then a menu below it, followed be three left floats below the menu, the left and right floats are not always going to be the same size but for now they can be. then the center section have a top and a bottom div, (the top middle floated div - for the main content) and the bottom div that has the stuff about the prices disclaimer in bold text in my previous mock layout jpg.


    Quote Originally Posted by Sammy12 View Post
    try setting

    Code:
    html, body {
     height: 100%;
    }
    you realize that some screens have heights that are twice as large as yours, so setting a div to 100% height should only be used for "overlays" like an opacity layer. (ie: when you click on an fb image).

    I agree with alykins, sometimes the answer isnt in black and white
    Last edited by jasonpc1; 07-27-2011 at 07:31 PM.

  • #15
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    @inners coming out: all child elements should be equal or smaller than their parents (with a few exceptions).

    Code:
    html, body { height: 100%; }
    if you make these 100%, you need to make each child leading up to your div 100%. you see, it's all relative to the parent. 100% of the parent.

    you could try absoluting a div.

    Code:
    html, body { height: 100%; }
    
    div.box {
     position: absolute;
     right: 10px;
     top: 0;
     height: 100%;
    }
    Code:
    <body>
     <div class="box"></div>
    </body>
    now your box is height: 100%;


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •