带页眉和页脚的100%Css布局

<div class="header">页眉内容</div>
<div class="content">页面主要内容</div>
<div class="footer">页脚内容</div>

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
}

.content {
  margin-top: 50px; /* 为了避免内容被页眉遮挡，设置内容区域的上边距 */
  margin-bottom: 50px; /* 为了避免内容被页脚遮挡，设置内容区域的下边距 */
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
}

.content {
  height: calc(100vh - 100px); /* 100vh表示浏览器窗口的高度，减去页眉和页脚的高度 */
}