尽管我的页眉和页脚分别位于页面顶部和底部，但页面中间的内容仍可滚动，因此我需要这样做。现在，页眉和页脚确实保留了，但是中间的内容无法滚动，我发现这使其无法在某些屏幕上运行。任何帮助，将不胜感激。
我试图弄乱它，到目前为止，我还没有走运。
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;
}
对于工作示例：https://jsfiddle.net/Matthew_/90gLy6nw/6/