CSS：仅在页面的"content"部分添加滚动条

Question

我正在开发一个网络应用程序，我想按如下所示进行布局。由于布局应该响应，因此页眉或页脚的高度是未知的。我想要实现的是将网页垂直分布在整个页面上。页脚应该在最底部，内容部分应该被拉伸以适应页眉和页脚之间的间隙，只有这部分页面是 "scrollable"。我已经在谷歌上搜索了四个小时，因为这似乎是一件非常简单的事情，但我还没有找到令人满意的答案。因此我的代码非常有限。

<body style="overflow: hidden; height: 100%;">
<div id="header">Header</div>
<div id="content" style="overflow: scroll;">Fill this space</div>
<div id="footer">Footer</div>
</body>

提前致谢！

Answer 1

这是您想要的吗？

body style="height: 100%, padding: 0px"
div id="content" style="overflow: auto; height: 80%;"

仅在 Firefox 上测试过。

Answer 2

你可以使用 flex :)

它非常简单易用。唯一的缺点是对旧浏览器的支持。

<body style="overflow: hidden; height: 200px; ">
  <div id="appContainer" style="display: flex; flex-direction: column; background: yellow; height: 100%;">
      <div id="header" style=" background-color: red;">Header</div>
      <div id="content" style="flex:1; overflow-y: scroll;">Fill this space</div>
      <div id="footer"  style="background-color: red;">Footer</div>
  </div>
</body>

https://jsfiddle.net/mwd3oqrL/

ps。身高只是为了在jsfiddle中测试它;）

Answer 3

Flex 变得简单！！

body,html{
  margin:0;
  height:100vh;
}
.container{
  display: flex;
  flex-direction: column;
  background: #fafafa;
  height: 100%;
}

.header{
  background-color:#3f51b5;
  padding:1%;
  color:white;
}
.main-content{
  flex:1;
  margin:2%;
  padding:2%;
  background-color:white;
  box-shadow:0px 0px 5px black;
  overflow-y: scroll
}
.footer{
  background-color:#3f51b5;
  padding:1%;
  color:white;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="header">
    <p>Header</p>
  </div>
  <div class="main-content">
    <p>content</p>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p>Hello its scrolling!!!!!</p>
  </div>
  <div class="footer">
    <p>footer</p>
  </div>
  </div>
</body>
</html>

https://jsbin.com/filineheru/

CSS：仅在页面的"content"部分添加滚动条

CSS: Add scrollbar only to "content" part of page

html

css

layout

responsive