Question

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

<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

你可以使用flex：）

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

 <dependency>
   <groupId>org.apache.storm</groupId>
   <artifactId>storm-kafka</artifactId>
   <version>1.0.2</version>
</dependency>

https://jsfiddle.net/mwd3oqrL/

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

Answer 2

Flex变得简单!!

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

https://jsbin.com/filineheru/

Answer 3

这就像你追求的那样吗？

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

仅在Firefox上测试过。

CSS：仅将滚动条添加到页面

3 个答案: