时间戳

首页 > 解决方案 > CSS 页眉和页脚，可滚动内容

html - CSS 页眉和页脚，可滚动内容

问题描述

我正在努力使用 CSS 创建具有固定页眉和页脚以及可滚动内容的可滚动“窗口”。这里接受的答案是我最接近解决这个问题的答案，但这需要设置“内容”类 div 的高度。

<!DOCTYPE html>
<head>
<style>
html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="header">Header</div>
  <div class="content" style="height:1000px;">
    Content
  </div>
  <div class="footer">Footer</div>
</div>
</body>

我的目标是： 1. 如果内容小于正文高度，则不滚动 2. 如果内容长于正文高度减去页眉和页脚，则滚动。

如何做到这一点？

标签： htmlcssscroll

解决方案

您可以使用 flex 或 grid ：

弹性例子

body{

margin:0;
}
 .wrapper {
height:100vh;
display:flex;
flex-direction:column;
}
.content {
flex:1;
overflow:auto;
}

/* demo purpose */
.content:hover:before {
content:'';
display:block;
padding-top:150vh;
}
<div class="wrapper">
  <div class="header">Header of any size</div>
  <div class="content" >
    Content
  </div>
  <div class="footer">Footer of any size </div>
</div>

和网格 

body {
margin:0;
}
.wrapper {
height:100vh;
display:grid;
grid-template-rows:auto 1fr auto ;
}
.content {
overflow:auto;
}


/* demo purpose */
.content:hover:before {
content:'';
display:block;
padding-top:150vh;
}
<div class="wrapper">
  <div class="header">Header of any size</div>
  <div class="content" >
    Content
  </div>
  <div class="footer">Footer of any size </div>
</div>

教程/提醒：

推荐阅读