我需要这样。不过在我的页眉和页脚分别保持在页面的顶部和底部，在我的页面中间的内容保持滚动做出来。因为它是现在的页眉和页脚都留下，但中间的内容不能滚动，我发现，使得它不能在一定的屏幕工作。任何帮助，将不胜感激。
我试图与它烂摊子，到目前为止，我还没有过运气。
HTML：
<div class="header">
<p> The Official Site of Victor Alam </p>
</div>
<body>
<div class="nav">
<ul>
<li><Home<li>
<li>Education<li>
<li>Work Experience<li>
<li>Hobbies<li>
</ul>
</div>
<img src="IMAGE" alt="Me" class="center">
<div class="info">
<p> BLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAH </p>
</div>
</body>
<div class="footer">
<ul>
<li>BLAH BLAH</li>
<li>BLAH BLAH</li>
<li>BLAH BLAH</li>
</ul>
</div>
CSS：
div.header
{
background-color:black;
color:white;
text-align:center;
height:40px;
padding:10px;
font-size:120%;
position:fixed;
left:0;
top:0;
width: 100%;
}
div.nav
{
text-align:center;
position:fixed;
left:0;
top:60px;
width: 100%;
background-color: darkblue;
color:white;
}
div.nav ul
{
list-style-type:none;
margin:0px;
overflow:hidden;}
div.nav li
{
float:left;
}
div.nav li a
{
display:block;
color:white;
text-align:center;
padding:16px;
text-decoration:none;
}
div.nav li a:hover
{
background-color:#111111;
}
.center
{
padding-top:140px;
display:block;
margin-left:auto;
margin-right:auto;
width:29%;
}
div.info
{
color:black;
text-align:center;
padding-top:20px;
}
div.footer {
position:fixed;
left:0;
bottom:0;
width:100%;
background-color:black;
color:white;
text-align:center;
}
div.footer ul {
display:inline-block;
list-style-type:none;
overflow:hidden;
}
div.footer li {
padding:10px;
float:left;
color:white;
}
The results are that it looks good on some monitors but on some it comes across as way to zoomed in and it won't let you scroll through the content.
要使用CSS的容器滚动，添加overflow: scroll。下面是一个非常基本的标题，正文和页脚的一个例子，其中的页眉和页脚留在顶部和底部，而身体滚动。
HTML：
<!DOCTYPE html>
<body>
<div class="header">
</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="footer">
</div>
</body>
CSS
html{
height: 100%;
}
body {
display:flex;
flex-direction: column;
justify-content: center;
align-items:center;
height: 100%;
overflow: hidden;
}
.header {
width: 100%;
height: 50px;
background: blue;
}
.content{
display:flex;
flex-grow:1;
overflow-y: scroll;
}
.footer {
width: 100%;
height: 50px;
background: red;
}
OKK，所以你可以使用position:fixed;的CSS属性
给CSS属性position:fixed;到两个部分页眉和页脚，这将是静态的时候，屏幕会滚动
注 - >不给固定的属性内容的div
通过这样做，你做这是独立于其他部分的页面的另一部分。由于所有的其它两（页眉和页脚）有固定的位置。现在只有你的内容部分将滚动。