绝对div内相对div的CSS样式，不考虑高度

Question

好吧，这是一个简单的 CSS 问题，但我似乎无法在网络上找到直接的答案来挽救我的生命。我已经设置好了:

<div id="app">
    <div id="header_div"></div>
    <div id="menu_div"></div>
    <div id="content_div"></div>
</div>

然后是一些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;
}

但是该 Dang div 没有响应百分比高度样式元素...有什么想法吗？

就上下文而言，我正在构建一个 React.js 站点，因此在使用 React 元素渲染样式元素后，我实际上使用了 scss 文件作为样式元素。很确定这并不重要，但只是因为我实际上并不知道一切，所以我会在这里提到这一点。 :) 预先感谢您的帮助!

-乔恩

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>