Question

基本上我想要有以下结构：HEADER - 固定宽度，div.wrapper - 在标题后取所有剩余的视口（例如，如果标题是100px高度，我的总视口高度是900px我希望.wrapper的高度是800像素）。然后我有一个没有固定高度的页脚，必须在.wrapper之后立即进行。

这是我的代码：

<body>
  <header>

  </header>

  <div class="wrapper">

  </div>

  <footer>
    <P>FOOTER</P><P>FOOTER</P><P>FOOTER</P><P>FOOTER</P>
  </footer>
</body>

CSS：

body {min-height:100%; width:100%;}

header {
  height:50px;
  background:red;
  width:100%;
}

.wrapper {
  height:100%;
}

footer {
  background-color:green;  

}

JSFIDDLE：https://jsfiddle.net/xwckn1kn/3/

.wrapper {height:100%}无效。

Answer 1

由于页脚最初应位于视口下方，我们可以使用calc，因为标题是已知高度

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
}
header {
  height: 50px;
  background: red;
}
.wrapper {
  height: calc(100vh - 50px);
  background: blue;
}
footer {
  background-color: green;
}

<body>
  <header>

  </header>

  <div class="wrapper">

  </div>

  <footer>
    <P>FOOTER</P>
    <P>FOOTER</P>
    <P>FOOTER</P>
    <P>FOOTER</P>
  </footer>
</body>

使包装器在标头之后获取所有视口

1 个答案: