Why don't these child elements take the height of their parent? - html

Question

When you set the width/height to 100% for divs, they should take the dimension of their parent element.
I see this is the case for the width but not the height. The elements in question are as such where fm is the parent and fm_xxx are the children.
#fm{
position: relative;
text-align: left;
width: 370px;
height: 100%;
}
#fm_tags{
position: relative;
width: 100%;
height: 100%;
}
#fm_arcmarks{
margin-top:10px;
position: relative;
width: 100%;
height: 100%;
clear: both;
}
#fm_space{
height: 10px;
width: 100%;
height: 100%;
clear: both;
}
for this html
<div id = 'fm'>
<div id = 'fm_tags'></div>
<div id = 'fm_space'></div>
<div id = 'fm_arcmarks'></div>
</div>
To see the code live go here:
https://frozen-dusk-2587.herokuapp.com/
and click on FAVS

Answer 1

There are two ways to make height work in CSS.
For elements that are in the normal "flow" of the document, height needs to be set all the way up to and including the HTML element.
In your code, you have set the height of the main #fm div to 100%, but 100% of what? Percentages are always based on the parent element and your code doesn't show the height set on the parent element of #fm
Add:
html, body {height:100%;}
to your code and it will work. But note in the snippet below, that I've changed the child div elements to have heights of 33%, rather than the 100% you initially had. This way each will take up 1/3 of the parent div which is taking up 100% of its parent (body) height, which is taking up 100% of its parent (html) height:
html, body {height:100%;}
div {border:1px solid black; }
#fm{
position: relative;
text-align: left;
width: 370px;
height: 100%;
}
#fm_tags{
position: relative;
width: 100%;
height: 33%;
}
#fm_arcmarks{
margin-top:10px;
position: relative;
width: 100%;
height: 33%;
clear: both;
}
#fm_space{
height: 10px;
width: 100%;
height: 33%;
clear: both;
}
<div id = 'fm'>div
<div id = 'fm_tags'>div</div>
<div id = 'fm_space'>div</div>
<div id = 'fm_arcmarks'>div</div>
</div>
Take the element out of the normal "flow". This can be done with float:value or by setting position:absolute or position:fixed. It also applies to <table> and <tr> elements (as special cases).
When elements are taken out of the normal flow of the document, they are no longer contained by their parent, so parent height no longer matters and the elements are now free to use the height you've specified.

Answer 2

It looks like you need to set
body_main to height: 100%
as I have checked the debugger on your dev site and html and body are already set to 100%.
The entire chain must be set to 100%. So when you omit body_main in the height chain. It looses it's height and so does its child elements.