...

View Full Version : how to make div grow to 100% in height ?



jasonpc1
07-26-2011, 09:36 AM
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;">&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>

vikram1vicky
07-26-2011, 09:58 AM
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

:)

jasonpc1
07-26-2011, 10:51 AM
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%



<!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>

vikram1vicky
07-26-2011, 12:10 PM
Why are you assign 100% height all elements?? It wont work. It will keep it's height auto only.

:)

JustinJD
07-26-2011, 12:20 PM
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?

jasonpc1
07-26-2011, 01:03 PM
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.'

vikram1vicky
07-26-2011, 01:17 PM
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

maas360
07-26-2011, 01:33 PM
Hi,

Please try overflow:auto along with height:100%

jasonpc1
07-26-2011, 03:12 PM
i just added the


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.

vikram1vicky
07-27-2011, 02:04 PM
Share the mockup,how your site should be and it is looking now with code :)

jasonpc1
07-27-2011, 04:12 PM
http://testingsite.freehostingcloud.com/

alykins
07-27-2011, 04:30 PM
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

Sammy12
07-27-2011, 04:31 PM
try setting



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

jasonpc1
07-27-2011, 07:28 PM
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.



try setting



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

Sammy12
07-27-2011, 07:34 PM
@inners coming out: all child elements should be equal or smaller than their parents (with a few exceptions).



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.



html, body { height: 100%; }

div.box {
position: absolute;
right: 10px;
top: 0;
height: 100%;
}




<body>
<div class="box"></div>
</body>


now your box is height: 100%;

jasonpc1
07-27-2011, 08:16 PM
i have redone the page completely as i was getting rather confused with original messed up code.

I have entered text in the divs to explain what effect i am trying to get.

http://testingsite.freehostingcloud.com/

basically so the leftsideFloat, innerFloat and rightsideFloat are all the same height as the floatContainer div.

Sammy12
07-27-2011, 08:25 PM
to make the bodyContainer center, you would use



#bodyContainer {
width: 1000px;
margin: 0 auto;
}


---

as for the height, its not actually 100% height of its parent. it's 100% - the "middle bottom".

1. are you looking to have the middle bottom always at the bottom?
2. is the middle content going to grow with time?

jasonpc1
07-27-2011, 10:30 PM
i added in the

margin: 0 auto;
to the bodyContainer but it is not in the center of the page.

the middle content will grow in time but at times stay small, i just wanted to have the 'middle bottom' text at the bottom of the 'innerFloat'

have left right and the middle all the same height.

Sammy12
07-27-2011, 10:32 PM
margin: auto; does not work if bodyContainer does not have a width or there is float/absolute on it.
try: defining a width to bodyContainer (1000px) then using margin: 0 auto;

if bodyContainer does not have a width you have to use display: table-cell to center

---

addressing the problem,

1. are the three columns going to be min-height: 100% minus the header height of the SCREEN of the user's computer or 100% minus the footer and header height

2. is the footer always going to be at the bottom of the page?
4. or is the footer naturally be pushed down based on how much content is on the page?

jasonpc1
07-27-2011, 10:55 PM
my bodyContainer has a width of 900px but neither margin auto or margin 0 auto place the page in the center.

http://testingsite.freehostingcloud.com/

Sammy12
07-27-2011, 10:57 PM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-37.png

previous questions I asked need to be answered

jasonpc1
07-27-2011, 11:05 PM
I have added in the code as in the screen shot you gave and added it in the bodyContainer and both times it does not go in the middle of the page i also used fire bug to alter the code and i still can not get this to work?

the footer will always be at the bottom of the page! (naturally pushed down)

i just wish there was a site that i could show that does this.

the three columns need to be the same height as the highest of the three columns.

Sammy12
07-27-2011, 11:12 PM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-38.png

by this code, you didnt add margin: 0 auto;

if the footer is naturally pushed down with the content, then why do you want the height to be 100%?

http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

jasonpc1
07-27-2011, 11:23 PM
this is very strange as i do have it in the code but for some reason it is not updating on the server.

I also uploaded the same file to another test server (not connected with the first testing site) and that too did not upload correctly a new file!



<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body { height: 100%; }
.center { text-align: center; }
.clearfloat { clear: both; }
.bodyContainer { border: 1px solid grey; margin 0 auto; width: 900px; height: 400px; }
.logo { border: 0px solid blue; }
.menu { border: 0px solid blue; }
.footer { border: 0px solid blue; }

.floatContainer { width: 0 auto; height: 0 auto; border: 1px solid blue; }
.innerFloat { float: left; height: 0 auto; border: 1px solid green; width: 490px; }
.leftSideFloat { float: left; width: 200px; border: 1px solid yellow; }
.middleTopFloat { float: left; width: 100%; border: 1px solid blue; }
.bottomTopFloat { clear: both; width: 100%; border: 1px solid yellow; }
.rightSideFloat { float: left; width: 200px; border: 1px solid yellow; }
</style>
</head>

<body>
<div class="bodyContainer">

<div class="center logo">logo</div>

<div class="center menu">menu</div>

<div class="floatContainer">
<!-- start of floats -->
<div class="leftSideFloat">left side float<br /><br />this section will contain varied links, not always the same number, so height is varied.<br /><br />text<br />text<br />text<br />
</div>
<div class="innerFloat">
<div class="middleTopFloat">middle top - this section i would like to be 100% high, so it grows so the middle bottom section hits the bottom of the floatContainer</div>
<br class="clearfloat" />
<div class="center bottomTopFloat">middle bottom</div>
</div>
<div class="rightSideFloat">right side float<br /><br />this section is the same as the left section varied.</div>
<!-- end of floats -->
<br class="clearfloat" />
</div>

<div class="center footer">footer</div>

</div>

</body>
</html>

Sammy12
07-27-2011, 11:26 PM
.bodyContainer { border: 1px solid grey; margin 0 auto; width: 900px; height: 400px; }

margin: 0 auto;

jasonpc1
07-27-2011, 11:26 PM
looking at the source code for both places i uploaded it to it is showing all of the code, but using firebug it does not ?

Sammy12
07-27-2011, 11:28 PM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-39.png

margin ---> : <--- 0 auto;

jasonpc1
07-27-2011, 11:30 PM
was missing :


ok let the floor eat me up now before i lose my mind!!!

ok one down...

how do i get the three columns to be the same height ?

Sammy12
07-27-2011, 11:35 PM
there are many ways. here's an article that better explains equal height columns

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

based on the design you provided, you are trying to make a "top" 100% high, when you have another element, "bottom". You can't have one element 100%, because the other element would have to be 0% to fit inside the parent.

jasonpc1
07-27-2011, 11:39 PM
actually equal height may not be whats needed.

i posted a jpg image in post 9 explaining the layout.

i thought if i have the middle section grow to 100% then the div below it would be nearer the bottom of the page just above the footer.

Sammy12
07-27-2011, 11:56 PM
Yeah I think your looking for something just absoluted to the bottom. i think i over thought what you wanted. sometimes the best solution is the simplest. all the style="" are the parts I changed.

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-40.png

the problem with this is that you have to change the height based on how much content there is. You said the content height changed, but if not frequent this would be the easiest.

HERE IS THE CODE FIXED: notice you have width and height: 0 auto, which is invalid.

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-41.png



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum