虽然我的页眉和页脚分别保留在页面的顶部和底部，但我需要这样做，而页面中间的内容仍然可以滚动。现在，页眉和页脚确实保留下来，但中间的内容无法滚动，我发现这使得它在某些屏幕上不起作用。任何帮助将不胜感激。
我曾试图搞砸它，但到目前为止我运气不好。
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;
}
关于html - 如何让我的内容可以滚动，同时保持我的页眉和页脚在同一个地方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54598718/