Force a div's height

HTML & CSS
1

I’m trying to force the height of a div to be the same of the height of it’s parent but no matter what I do it’s not working.

This is what I’ve got at the moment: http://jsfiddle.net/thehappyappy/kyjrr5z5/

2

Percent heights only work if the parent has a set height. You don’t have html/body with 100% height.

html,body{height:100%;}
3

Thanks, I made sure that was set for both html and body but that didn’t work for forcing the height of the div

4

Hi,

You can’t make an element fill another elements height unless you have fixed heights to work with and an unbroken chain of fixed heights on nested elements. Suffice to say one of the only times you will use height:100% will be on html and body when required. In most other cases height:100% will fail unless the parent also has a fixed height (not auto or content height).

It looks like you are trying to overlay a panel on your image and you could do this with absolute positioning instead.

e.g.

.mobile-text_medium_header {
position: absolute;
width:50%;
top:15px;
right:0;
bottom:15px;
background: #000;
background:rgba(0,0,0,0.7);
overflow:auto;
}

Then get rid of your .clr div as that is taking up 20px of space for nothing. You never need to add empty divs to clear or contain floats these days (unless you are using bootstrap ugh!).

Also remove all the height:100% as they will do nothing in your setup.

If you want equal columns of content then use the display table and table-cell methods instead. It looks like though in this case you are overlaying text on an image so you will probably have to use the absolute positioning method I have given but I am just guessing on your requirements.

5

Thank you, that worked. I thought that you had to set the height to something at least, I didn’t realise that it setting top and bottom would force it as well!

6

Absolute elements will keep track of a relatively positioned parent by using the left:right top and bottom co-ordinates. They are the only elements that can keep track of the height of a parent (apart from display;table-cell and flexbox) but of course become removed from the flow so have to be used with care.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.