CSS styling on relative divs inside absolute div, height not taking - css

Question

Ok, so this is a simple css question, but I can't seem to find a straight answer on the web to save my life. I've got this set up:
<div id="app">
<div id="header_div"></div>
<div id="menu_div"></div>
<div id="content_div"></div>
</div>
and then some css:
#mixin relPos {
position: relative;
margin-top: 5px;
width: 100%;
}
/*** App level ***/
#app {
position: absolute;
word-wrap: break-word;
height: 100%;
width: 100%;
}
/*** Landing Page ***/
#header_div {
#include blackBorder;
#include relPos;
left: 0;
height: 30%;
}
#menu_div {
#include blackBorder;
#include relPos;
height: 10%;
}
#content_div {
#include blackBorder;
#include relPos;
height: 56%;
overflow: scroll;
}
but the dang divs are not responding to the percentage height style element... any ideas?
For context, I'm building a React.js site so I'm actually using scss files for my styling elements after rending them with React elements. Pretty sure that doesn't matter but just because I don't actually know everything, I'll mention that here. :) Thanks in advance for any help!
- Jon

Answer 1

#top {
position:absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
#one {
position:relative;
margin-top:1%;
height: 30%;
width: 100%;
background-color:red;
}
#two {
position:relative;
margin-top:1%;
height: 10%;
width: 100%;
background-color:green;
}
#three {
position:relative;
margin-top:1%;
height: 57%; /* not 60% to account for the 5px margin */
width: 100%;
background-color:blue;
}
<div id="top">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>

Answer 2

Instead of using multiple position: relative; use the float: property across for cleaner code.
You can achieve this cleanly with 3 float:left;. Keep the parent div position:relative; and the 3 inner, float:left;. Nest another div around all these elements with your position:absolute; if still necessary.

Answer 3

So here's my React code:
import React from 'react';
import ReactDOM from 'react-dom';
class LandingPage extends React.Component
{
render()
{
return(
<div>
<div id="header_div">
<h1> Header picture goes here </h1>
</div>
<div id="menu_div">
<h2> here's for the menu buttons </h2>
</div>
<div id="content_div">
<h3> and... the content to be loaded based on first load or menu button mash </h3>
</div>
</div>
);
}
};
export default LandingPage;
And because I'm using react elements, I had to return one div with the three I'm trying to style in it for my LandingPage element... so my structure was actually ... and so on. Because of this, the container div was not app and there for it didn't matter if I did my styling on app, I needed to do it on the other div in the middle. I added a id="main" to the middle div and styled it as I had my #app styled... Once I did, it was all good! Thanks guys!