我正在尝试使用css为单个页面应用程序设置页面布局，如下所示：
一个头的宽度为100％然后3列（西，中，东），每个列都有固定的页脚，“固定”在页面/列的底部。
仅该列的内容应可滚动。
我设法使这些代码正常工作，但是我不得不使用css“ calc”关键字和标头的硬编码值，这是我不喜欢的（以下codepen中的css第33行）。这是一个供参考的模拟：https://codepen.io/nabbo/pen/JjoORdY
这里是我到目前为止拥有的“最佳”解决方案：
<html>
<body>
<header>Header</header>
<div id="main">
<div id="west">
<div class="content">
west content
</div>
<footer class="footer">West footer</footer>
</div>
<div id="center">
<div class="content">center content</div>
<footer class="footer">center footer</footer>
</div>
<div id="east">
<div class="content">east content</div>
<footer class="footer">east footer</footer>
</div>
</div>
</body>
</html>
连同CSS：
<style>
body {
margin: 0;padding: 0;height: 100vh;overflow: hidden;
}
header {
width: 100%;
height: 50px;
background-color: LightCoral;
}
#main {
display: flex;
height: 100%;
}
#center {
flex: 1;
background-color: moccasin;
}
#west,#east {
width: 250px;
background-color: lavender;
}
footer.footer {
position: fixed;
bottom: 0;
background-color: MediumAquamarine;
width: 100%;
height: 40px;
}
div.content {
overflow-y: auto; /* only this should be vertically scrollable */
height: calc(100% - 90px); /* **I WANT TO AVOID THIS : 90 is actually 50px for header and 40px for footer** */
}
</style>
我想知道是否有一种方法可以在没有硬编码的“ calc”内容的情况下实现相同的行为（每次页脚高度，行高或...时，我都必须更改）
我一直在研究CSS flex和CSS网格（我不太熟悉），但是找不到合适的解决方案。
[我知道我也可以用一点JS来计算，但是我更喜欢使用100％CSS解决方案，这将使代码更易于阅读和维护。
感谢您的帮助！
CSS
对于main div列，我使用Grid；对于content div列，我使用Flexbox。
body {
margin: 0;padding: 0;height: 100vh;
}
header {
height: 50px;
background-color: LightCoral;
}
#main {
display: grid;
grid-template-columns: 250px 1fr 250px;
grid-auto-rows: 100vh;
}
#west,#east {
background-color: lavender;
}
#center .content {
background-color: moccasin;
}
#west, #center, #east {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
overflow: auto;
}
.footer {
height: 40px;
background-color: MediumAquamarine;
}
不需要calc()，甚至不需要固定位置。可以使用简单的CSS属性（包括flexbox）来处理整个布局。
header {
height: 50px;
background-color: LightCoral;
}
#main {
display: flex;
height: calc(100vh - 50px);
}
#center {
flex: 1;
display: flex;
flex-direction: column;
background-color: moccasin;
}
#west,
#east {
flex: 0 0 250px;
display: flex;
flex-direction: column;
background-color: lavender;
}
footer.footer {
margin-top: auto;
flex: 0 0 40px;
background-color: MediumAquamarine;
}
div.content {
overflow-y: auto;
}
body {
margin: 0;
height: 100vh;
}<header>Header</header>
<div id="main">
<div id="west">
<div class="content">
west 1<br />west 2<br />west 3<br />west 4<br />west 5<br />west 6<br />west 7<br />west 8<br />west 9<br />west 10<br />west 11<br />west 12<br />west 13<br />west 14<br />west 15<br />west 16<br />west 17<br />west 18<br />west 19<br />west 20<br
/>west 21<br />west 22<br />west 23<br />west 24<br /> west 25<br />west 26<br />west 27<br />west 28<br />west 29<br />west 30<br />west 31<br />west 32<br />west 33<br />west 34<br />west 35<br />west 36<br />west 37<br />west 38<br />west 39<br
/>west 40<br />west 41<br />west 42<br />west 43<br />west 44<br />west 45<br />west 46<br />west 47<br /> west 48<br />west 49<br />west 50<br />west 51<br />west 52<br />west 53<br />west 54<br />west 55<br />west 56<br />west 57<br />west 58<br
/>west 59<br />west 60<br />west 61<br />west 62<br />west 63<br />west 64<br />west 65<br />west 66<br />west 67<br />west 68<br />west 69<br />west 70<br /> west 71<br />west 72<br />west 73<br />west 74<br />west 75<br />west 76<br />west 77<br
/>west 78<br />west 79<br />west 80<br />west 81<br />west 82<br />west 83<br />west 84<br />west 85<br />west 86<br />west 87<br />west 88<br />west 89<br />west 90<br />west 91<br />west 92<br />west 93<br /> west 94<br />west 95<br />west 96<br
/>west 97<br />west 98<br />west 99<br />west 100
</div>
<footer class="footer">West footer</footer>
</div>
<div id="center">
<div class="content">center content</div>
<footer class="footer">center footer</footer>
</div>
<div id="east">
<div class="content">east content</div>
<footer class="footer">east footer</footer>
</div>
</div>