html - 使用CSS进行二维div布局

Question

我尝试在垂直和水平方向上调整我的页面内容，并且在大多数情况下，我已经实现了这种效果。但是，我的一些“行”超出了我为它们定义的尺寸。我重新创建了我的环境 here .我似乎无法弄清楚为什么 topHalf div 的边框一直延伸到 menuBar div。

html, body, #page {
  margin: 0;
  padding: 0;
  height: 100%;
}

#menuBar {
  height: 5%;
  text-align: center;
  vertical-align: middle;
}

#topHalf,
#bottomHalf {
  display: flex;
  position: relative;
}

#topHalf {
  height: 50%;
}

#bottomHalf {
  height: 45%;
}

#menuPanel,
#storagePanel,
#equipmentPanel,
#statsPanel,
#mapPanel,
#craftingPanel,
#utilityPanel {
  padding: 25px;
  position: relative;
  flex: 1;
  overflow-wrap: normal;
  overflow: auto;
  border: 2px solid;
}

<div id="page">
  <div id="menuBar">
    <div id="menuPanel">
      <h3>Menu</h3>
    </div>
  </div>
  <div id="topHalf">
    <div id="storagePanel">
      <h3>Inventory</h3>
    </div>
    <div id="equipmentPanel">
      <h3>Equipment</h3>
    </div>
    <div id="statsPanel">
      <h3>Stats</h3>
    </div>
  </div>
  <div id="bottomHalf">
    <div id="mapPanel">
      <h3>Map</h3>
    </div>
    <div id="craftingPanel">
      <h3>Crafting</h3>
    </div>
    <div id="utilityPanel">
      <h3>Utilities</h3>
    </div>
  </div>
</div>

Answer 1

Your updated fiddle .

---

这是我使用的:

#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#page > * {
  flex-grow: 1;
}
#menuBar {
  flex-grow: 0;  
}

我还从 #page 的所有子项中删除了硬编码的高度。

---

Ref: I can't seem to figure out why the borders for the topHalf divs are extending up so far into the menuBar div.

边框重叠效果的原因是#menuBar超过了其父高度的5%。
您可能希望它占用所需的空间，但不要更多(它是 #page 的唯一不应增长的子级)。
其余的 child 应该在剩余的可用高度上平均成长。

min-height:100vh 使 #page 至少为设备屏幕高度的 100%。如果 #page 的子项不适合单个屏幕高度，它将开发一个滚动条(这可能就是您想要的 - 您希望所有内容都可访问)。