使用 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：我似乎无法弄清楚为什么 topHalf div 的边框会一直延伸到 menuBar div 中。

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

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

Answer 2

https://jsfiddle.net/La3bcqkx/1/

移除 h3 的默认边距。并且 div 的填充使它们比规定的 % 大。

#menuBar h3 {
    margin:0;
}
#menuBar {
    padding: 0;
}

使用border-box解决填充问题。

另请阅读：https://quirksmode.org/css/user-interface/boxsizing.html

Answer 3

您可以尝试从#menuBar 中删除height:5% 我想你正在寻找这个。删除height 后，布局看起来正确。我在这里添加了sn-p。

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

#menuBar {
  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>

1. 垂直对齐。

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

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

#topHalf,
#bottomHalf {
  display: flex-row;
  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>