我尝试在垂直和水平方向上调整我的页面内容,并且在大多数情况下,我已经实现了这种效果。但是,我的一些“行”超出了我为它们定义的尺寸。我重新创建了我的环境 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>
最佳答案
这是我使用的:
#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
的子项不适合单个屏幕高度,它将开发一个滚动条(这可能就是您想要的 - 您希望所有内容都可访问)。
关于html - 使用CSS进行二维div布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46454790/