我有一个 3 列主体,两侧宽度固定,中间列填充剩余宽度。
但是,我需要使所有列填充页面的整个高度。
我将所有父级的高度设置为height: 100%
,并且我不想使用具有巨大边距或填充的解决方法,因为我正在使用滚动条。
#container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
}
.col-side {
width: 240px;
height: 100%;
}
#col1 {
border-right: 2px solid rgba(0, 0, 0, 0.12);
}
#col3 {
border-left: 2px solid rgba(0, 0, 0, 0.12);
}
<div id="container">
<div class="col-side" id="col1">
Left
</div>
<div class="col" id="col2">
Center
</div>
<div class="col-side" id="col3">
Right
</div>
</div>
小演示可以在这里找到:
最佳答案
当您创建 Flex 容器(display: flex
或 display: inline-flex
)时,它会自动应用 flex-direction: row
和align-items:stretch
(以及其他初始设置)。
这些默认设置将 flex 元素排列成一行,并为每个元素提供容器的完整高度。但是,如果您在 Flex 元素上设置 height
,它将覆盖 align-items
。因此,请删除您在元素上设置的所有高度。
这应该适合你:
#container {
display: flex;
justify-content: space-between;
height: 100vh;
}
.col-side {
flex: 0 0 240px;
}
#col2 { flex: 1; }
#container > div + div {
border-left: 2px solid rgba(0, 0, 0, 0.12);
}
#col1 { background-color: lightgreen; }
#col2 { background-color: tomato; }
#col3 { background-color: aqua; }
body { margin: 0; }
<div id="container">
<div class="col-side" id="col1">Left</div>
<div class="col" id="col2">Center</div>
<div class="col-side" id="col3">Right</div>
</div>
关于html - 具有 3 列、100% 高度和固定宽度侧列的 Flex 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48082358/