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所有孩子的硬编码高度。

参考：我似乎无法弄清楚为什么topHalf div的边框到目前为止扩展到menuBar div。

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

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

Answer 2

您可以尝试从height:5%删除#menuBar 我想你正在寻找这个。删除height后，布局看起来正确。我在此处添加了代码段。

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>

垂直对齐。

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>

Answer 3

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

删除h3的默认边距。并且div的填充使它们大于所述的％。

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

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

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

使用CSS进行二维Div布局

3 个答案: