我正在用CSS来创建具有固定页眉和页脚以及可滚动内容的可滚动“窗口”。这里被接受的答案是我已经得出的最接近解决这个问题的答案，但这需要设置“内容”类div的高度。
<!DOCTYPE html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
max-height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.content {
flex: 1;
overflow: auto;
background: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content" style="height:1000px;">
Content
</div>
<div class="footer">Footer</div>
</div>
</body>
我的目标是：1。如果内容小于机身高度，则不滚动2。如果内容长于正文高度减去页眉和页脚，则滚动。
如何实现这一点？
您可以使用flex或grid：
flex示例
null
body{
margin:0;
}
.wrapper {
height:100vh;
display:flex;
flex-direction:column;
}
.content {
flex:1;
overflow:auto;
}
/* demo purpose */
.content:hover:before {
content:'';
display:block;
padding-top:150vh;
}<div class="wrapper">
<div class="header">Header of any size</div>
<div class="content" >
Content
</div>
<div class="footer">Footer of any size </div>
</div>