div with 100% height in dynamicly sized element

Question

To describe my item- I have a div element which grows in size if more content is added- also the parent div grows in size as it should be.

Then I have 2 div elements one floated left and the other on the right. I set height to 100% but that don't work. How could I achieve such behavior?

http://109.91.124.194/nucleareducated_2/index.php

I think more explanation is in line here: are the 2 floated divs inside the parent container? Is the parent not growing when you add content to the floated divs? what element are you trying to make the floated divs 100% of? I do not see any elements with a height greater than 0 in your markup. — Tim Joyce, May 07 '11 at 13:02
The 2 floated divs are in the container and the container grows in size- if I set the container height to a fixed value it work. The floated divs should be 100%height of their parent. — Mythli, May 07 '11 at 13:07
and `
` is intended to be 100% height of the screen? the parent... — Tim Joyce, May 07 '11 at 13:09

score 3 · Accepted Answer · edited May 23 '17 at 12:19

This is a typical problem that unfortunately does not have a simple solution. Do a quick Google search for equal height columns and you will see what I mean. Your code is not working because height:100% does not work unless the parent container has a specified height to calculate what 100% is. Without a specified height set, then height:100% defaults to height:auto and you end up with divs that do not expand to the size of the parent.

As you have probably guessed, it's pretty hard to set the height of the parent div because it changes. The answers include setting the height dynamically with Javascript, or more often than not, just faking it so that it appears that the columns expand to the size of the parent.

IMO the best way is to use the css table attribute if you only care about newer browsers, it does not work on IE7 or older.

#containerdiv {
    display:table;
}

#childdivleft, #childdivcenter, #childdivright {
    display: table-cell;
}

The next best is to use large values for padding and a corresping negative margin on the bottom of the child containers.

#leftdiv,#rightdiv {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

You can also use -

jQuery - Columns of Equal Height with JQuery

several other solutions - CSS - Equal Height Columns?

score 0 · Answer 2 · answered May 07 '11 at 13:10

0

let me know if this is what you are looking for: tested in chrome*

<html>
<head>
<style>
html, body {
    height:100%;    
}

</style>
</head>
<body>
<div style="clear: both; height:100%;">
    <div class="pageShadow" style="background-color: blue; height: 100%; width: 47px; float: left;"></div>
    <div class="pageShadow" style="background-color: blue; height: 100%; width: 52px; float: right;"></div>
    <div class="pageShadow" style="background-color: green; margin-left: 47px; margin-right: 52px;"></div>
</div>

</body>
</html>

answered May 07 '11 at 13:10

Tim Joyce

4,487
5
34
50

Yes that is what i want but it won't work for me(it works standalone but not in my element structure) – Mythli May 07 '11 at 13:24
I have not tested it, but I think you have to trickle down the height properties all the way from the body. I think you can do that by setting `position:relative;` in the parents. Somehow, you have to inherit the height properties all the way to the floated divs – Tim Joyce May 07 '11 at 13:28
the height attribute must have a specific height set by the parent element in order to calculate how much 100% is. Unless you specify a height in the parent then height:100% becomes height:auto. – Brent Friar May 13 '11 at 00:30
and that is why i have `html, body { height:100%; }` in the css – Tim Joyce May 16 '11 at 12:23

score 0 · Answer 3 · answered May 07 '11 at 13:12

Maybe this is what you mean? You can add a div around the left and right div if you want an area with 100% height.

CSS:

* { margin:0; padding:0 }
#around { background:yellow; float:left }
#left { float:left; width:40%; background:red }
#right { float:right; width:60%; background:green }
#bottom { clear:both; background:blue }

HTML:

<div>
    <div id="around">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <div id="bottom"></div>
</div>

div with 100% height in dynamicly sized element

3 Answers3