html - 如何让 sub div 不考虑其堂兄的高度？

Question

我几乎可以肯定这将是一个明确的答案:两个答案，但我遇到的问题是把它放在哪里，或者如何全神贯注地理解它。

我在 divs 中有 divs，这个特殊的(切面)正在考虑它的堂兄 ul(subnav)的高度。我试过将 ul 封装在它自己的 div 中，但我一定不明白 position 和 clear 是如何工作的。

这是我第一次在 Stackoverflow 上发帖，欢迎任何反馈 =D

http://jsfiddle.net/JustJinxed/d62eLh4o/

HTML

<div id="pagecut">
  <div id="pagebg">
    <div id="nav">
      <ul id="subnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      </ul>
      <div id="sectioncut">
        This is a test. 
      </div>
    </div>
  </div>
</div>

CSS:

body,html { 
    border: 0px;
    margin: 0px;
    height: 100%;
    background-color: #2200FF;

}

#pagecut {
    width: 95%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #2200FF;
    outline-style: solid;
    outline-color:#FF0004;


}

#pagebg {
    width: 100%;
    height: 100%;   
    margin-left: auto;
    margin-right: auto;
    background:url(Img/bg1.png);
    background-size: 100% auto;
    background-repeat:no-repeat;
}


#nav {
    width: 98%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    outline-style: solid;
    outline-color:#00FF00;
}

#subnav {
    margin: 0px;
    padding: 0px;
}

#subnav li {
    display:inline;
    background-color: #7DA5EB;
    border-color: #7DA5EB;
    color: #FFF;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-style: solid solid none;
    padding-right: 7px;
    padding-left: 7px;
    margin-left: 2px;
    margin-right: 2px; 
    font-size: x-large;
}

#sectioncut {
    height: 100%;
    background-color: #7DA5EB;
}

Answer 1

如果我理解正确，你的问题是 #sectioncut 溢出了它的容器，因为它占用了整个容器的高度并被容器内的另一个 div (#subnav) 向下推。

如果这就是问题所在并且您只想填充子导航 div 留下的空间，我认为 How can I make a DIV take up the rest of the height of a container div?会帮助你。

这也是我第一次回答，所以我希望我做对了，这对你有帮助。