Html 如何避免sub div考虑其表亲的身高？

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

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

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

HTML

---

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

如果这就是问题所在，而您只想填充subnav div留下的空间，我想这会对您有所帮助

---

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

第一个问题你做得很好：）你能解释一下“考虑身高”是什么意思吗。是同一高度吗？您希望它的高度是多少？container div获取views端口的整个高度，这正是我想要的。subnav部分没有设定的高度，大约需要75像素的空间。这就是我想要的。理想情况下，我希望subnav下的div占用container div的剩余空间，但它可以做到这一点，甚至更多。它似乎使用容器的高度而不考虑容器中的其他内容，然后#sectioncut延伸到div的边界之外，并使浏览器在侧面显示滚动条。我不想使用凌乱的溢出限制或jquery来处理css作业。在该线程中有很多建议，我认为（以及这里的许多其他Q/a）符合我的经历。尝试这些（这里有4-5条建议和一些解释）需要一些时间。选择的一条是jquery驱动的，即使我使用它，我也试图避开它。没关系，把你的链接和另一条链接混淆了。我几乎可以肯定jquery的答案会起作用，但我不喜欢使用在该网站的移动版本中无法使用的脚本破解来设置布局。使用overflow的另一个答案是：hidden也不理想，因为它会在这个特定分区的底部剪切边框样式。只是想知道，您是否考虑过为菜单设置一个固定的高度（#subnav）？这将允许您对第二个div使用绝对定位（顶部：Xpx；底部：0px；）或对第二个div的高度使用计算（100%-Xpx）。同时，使用表格可能会解决这个问题。我想这就是我最终要走的路线。我觉得很奇怪，在没有jScript或设置div-absolute的情况下，没有真正的动态方法来实现这一点。如果没有其他人参与的话，我将在今天结束前标记这个答案。

<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>

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;
}