内容在页眉和页脚下答案

【问题标题】：Content is going under Header and Footer内容在页眉和页脚下
【发布时间】：2022-01-15 02:24:32
【问题描述】：

header 和 footer 之间的 content 正在它们下方。我尝试将flex-start 和flex-end 设置为header 和footer，但它们没有转到absolute top。它们堆叠在内容的上方和下方。

表头的样式是

.Header {
  width: 100%;
  position: absolute;
  top: 0;
  flex-wrap: wrap;
}

页脚的样式是

.Footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  flex-wrap: wrap;
}

内容的风格（如果有帮助的话）是

.Content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

【问题讨论】：

在此处添加 HTML 代码
请分享完整的代码 sn-p（HTML 和 CSS）以便正确理解您的问题。

标签： html css reactjs

【解决方案1】：

绝对定位的元素从文档的正常流程中取出。

您可以在内容的顶部和底部添加边距以为页眉和页脚添加空间，或切换到使用"sticky" positioning。

.Header {
  position: sticky;
  top: 0;
}
.Footer {
  position: sticky;
  bottom: 0;
}

【讨论】：

【解决方案2】：

您的标头正在使用position: absolute，所以它没有流动。使用position: relative 或为您的内容添加顶部填充/边距以及标题的高度。

.header {
  width: 100%;
  position: absolute;
  top: 0;
  flex-wrap: wrap;
  background: #707070;
  height: 100px;
}

.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  flex-wrap: wrap;
  background: #e9e;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: blue;
  margin-top: 100px;
  
}

<body>
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    <h2>Content</h2>
  </div>
  <div class="footer">
    <h2>Footer</h2>
  </div>
</body>

【讨论】：

【解决方案3】：

试试这个demo

HTML

<body>
  <div class="Header">Header</div>
  <div class="Content">Content</div>
  <div class="Footer">Footer</div>
</body>

CSS

body{
  margin:0;
  padding:0;
  }

.Content {
  background-color:red;
  height:90vh;
  width: 100vw;
}

.Footer {
  background-color:green;
  width: 100vw;
  bottom: 0;
    height:5vh
}

.Header {
  background-color:blue;
  width: 100vw;
  top: 0;
  height:5vh
}

欲了解更多关于该职位的信息，请访问： https://www.w3schools.com/css/css_positioning.asp

【讨论】：

【解决方案4】：

你可以给内容的顶部和底部填充等于页眉和页脚的高度

.Content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 40px;
padding-bottom:40px ;
overflow-y:auto;
}

【讨论】：