html - position为fixed,3个横向div,header和footer高度为100px,中间content高度100%

Justin Zheng

2017-11-16T08:53:32Z||2017-11-16T08:53:32Z

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>

<style>
  .container {
    margin: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .box1 {
    width: 100%;
    position:fixed;
    background: red;
    height: 100px;
    top: 0px;
  }

  .box2 {
    width: 100%;
    overflow: scroll;
    position: fixed;
    height: 100%;
    background: green;
    margin-top: 100px;
    padding-bottom: 100px;
  }

  .box3 {
    width: 100%;
    position:fixed;
    background: yellow;
    height: 100px;
    bottom: 0px;
  }
</style>
</head>

<body>
<div class="container">
  <div class="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
</div>
</body>

</html>