如何让sub div不考虑其表弟的高度？

Question

我几乎可以肯定这将是一个明确的：两个答案，但我遇到的麻烦是把它放在哪里，或者说如何绕过我的头来理解它。

我有div中的div，这个特殊的div（sectioncut）考虑了它的表兄ul（subnav）的高度。我试过将ul封装在自己的div中，但我一定还不明白position和clear是如何工作的。

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

http:/jsfiddle.netJustJinxedd62eLh4o。

超文本标记语言

<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）推倒。

如果这就是问题所在，而你只想填满subnav div留下的空间，我认为 如何让DIV占据容器div的其余高度？ 会对你有所帮助。

我也是第一次回答，希望我做的对，对你有帮助。