如何让我的内容可以滚动，同时保持我的页眉和页脚在同一个地方答案

【问题标题】：How can I get my content to be scroll-able while maintaining my header and footer being in the same place如何让我的内容可以滚动，同时保持我的页眉和页脚在同一个地方
【发布时间】：2019-07-03 01:37:50
【问题描述】：

我需要这样做，尽管我的页眉和页脚分别位于页面的顶部和底部，但页面中间的内容仍然可以滚动。因为现在页眉和页脚确实保留，但中间的内容无法滚动，我发现这使得它在某些屏幕上不起作用。任何帮助将不胜感激。

我曾试图弄乱它，但到目前为止我还没有运气。

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.

【问题讨论】：

body { min-height: 100vh;} 可能会有所帮助

标签： html css header footer

【解决方案1】：

要使用 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/

【讨论】：

【解决方案2】：

好的，所以你可以使用position:fixed;的CSS属性

将 CSS 属性 position:fixed; 赋予部分 header 和 footer ，当屏幕滚动时它们将是静态的

注意 --> 不要将固定属性赋予内容 div

先制作内容div
还有一些文字

通过这样做，您可以创建独立于其他部分的页面的另一部分。由于所有其他两个（页眉和页脚）都有固定位置。现在只有你的内容部分会滚动。

【讨论】：