我正在学习 html/css vanilla 设计。 我的布局应该是一个页眉、一个页脚和 3 列，填充所有空间，无论其内容如何。 我正在考虑基于网格的 3 列布局，想法是使用 display:flex;用于拉伸中心列以填充父容器的 100% 高度。
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
position: sticky;
top: 0;
background-color:rgb(89, 89, 165);
height: 40px;
display: flex;
justify-content: end;
align-items: center;
flex: 1;
padding: 0.1em;
}
footer {
bottom: 0;
position: fixed;
width: 100%;
padding: 5px;
background-color: darkslategray;
height: 2vm;
font-style: italic;
font-size: 1vm;
display: flex;
}
.main-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
justify-items: center;
.main-column {
display: flex;
border-style: groove;
border-width: 4px;
padding: 1em;
justify-content: center;
justify-self: stretch;
align-self: stretch;
}
}
<body>
<header>
...
</header>
<div class="main-container">
<div class="left-column">
...
</div>
<div class="main-column">
...
</div>
<div class="right-column">
...
</div>
</div>
<footer>
...
</footer>
</body>https://codepen.io/idum/pen/GgKpmNd
问题是中心柱没有填满所有空间。
为什么？
如果您对页脚使用非相对
heightcalcheight在我的示例中，我将主要内容的
heigthcalc(100vh - 70px)body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
position: sticky;
top: 0;
background-color:rgb(89, 89, 165);
height: 40px;
display: flex;
justify-content: end;
align-items: center;
flex: 1;
padding: 0.1em;
}
footer {
bottom: 0;
position: fixed;
width: 100%;
padding: 5px;
background-color: darkslategray;
height: 20pxvm;
font-style: italic;
font-size: 1vm;
display: flex;
}
.main-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
justify-content: center;
height: calc(100vh - 70px);
}
.main-container .main-column {
display: flex;
border-style: groove;
border-width: 4px;
padding: 1em;
justify-content: center;
align-self: stretch;
}
}<body>
<header>
...
</header>
<div class="main-container">
<div class="left-column">
...
</div>
<div class="main-column">
...
</div>
<div class="right-column">
...
</div>
</div>
<footer>
...
</footer>
</body>在你的主容器中，高度与div的内容有关。 但如果你想设置自定义高度，你可以使用 vh 设置高度。 所以添加主容器类“height:custom_height vh” 例如“高度：90vh”