如何使中心区域全视口高度减去动态高度区域（flexbox）

Question

如何在不使用固定高度的情况下执行此操作。这样，<div>区域是可滚动的，每个部分都占据了完整的可见高度。但导航元素是固定的。

执行此操作的一种方法是calc(100vh - dynamic heights)，但要寻找一种非硬编码方式。

* {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body, header, section, footer {
  display: flex;
}

body, div {
  flex-direction: column;
}

section {
  flex: 1;
  background: red;
  border: 1px solid pink;
}

footer {
  height: 200px; /* just for demo purposes */
  width: 100%;
  background: yellow;
}

header {
  width: 100%;
  height: 50px; /* just for demo purposes */
  background: orange;
}

div {
  overflow-y: scroll;
  display: flex;
  flex: 1;
}

<header>

</header>
<div>
  <section>

  </section>
  <section>

  </section>
  <section>

  </section>
</div>
<footer>

</footer>

Answer 1

我就是这样做的

* {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
section {
  min-height: 100vh; /* make the body and sections the height of the viewport */
  overflow: hidden;
}

body { /* only the body needs to be flex - you don't want everything to be otherwise you will have ie / safari problems with nested flex */
  display: flex;
  flex-direction: column;
}

.main {
  /* min-height: 100px; - you can add a min height here if you want so you don't get a situation where this middle section doesn't show up */
  flex-grow: 1;  /* grow the main to be the rest of the height */
  background: red;
  border: 1px solid pink;
  position: relative;
}

.scroll {  /* add a scrollable div for your sections */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow:auto;
}

footer {
  height: 200px; /* this can be removed if you want */
  width: 100%;
  background: yellow;
}

header {
  width: 100%;
  height: 50px;       /* this can be removed if you want */
  background: orange;
}

<header>

</header>
<div class="main">
  <div class="scroll">
    <section>

    </section>
    <section>

    </section>
    <section>

    </section>
  </div>
</div>
<footer>

</footer>

评论后：

* {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100vh;
  /* make the body the height of the viewport */
  overflow: hidden;
}

body {
  /* only the body needs to be flex - you don't want everything to be otherwise you will have ie / safari problems with nested flex */
  display: flex;
  flex-direction: column;
}

.main {
  /* min-height: 100px; - you can add a min height here if you want so you don't get a situation where this middle section doesn't show up */
  flex-grow: 1;
  /* grow the main to be the rest of the height */
  background: red;
  border: 1px solid pink;
  position: relative;
}

.scroll {
  /* add a scrollable div for your sections */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height:100%;
  overflow:auto;
}

section {
  border: 1px solid blue;
  box-sizing:border-box;
  min-height:100%;
}

footer {
  height: 200px;
  /* this can be removed if you want */
  width: 100%;
  background: yellow;
}

header {
  width: 100%;
  height: 50px;
  /* this can be removed if you want */
  background: orange;
}

<header>

</header>
<div class="main">
  <div class="scroll">
    <section>

    </section>
    <section>

    </section>
    <section>

    </section>
  </div>
</div>
<footer>

</footer>

Answer 2

您可以稍微简化该代码，flex: 1（您已经拥有）和div flex-shrink: 0上的{2}键设置为section。

flex: 1使div填充可用空间而不考虑自己的内容，flex-shrink: 0会阻止section 收缩-to配合

我也从100%上的height更改为100vh，因此无需重复该行。

在Chrome，Firefox，Edge和IE11上取得了成功测试，我还删除了一些不必要的属性，例如width: 100%和所有固定的height。

Fiddle demo

Stack snippet

* {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
}
body, div {
  display: flex;
  flex-direction: column;
}
div {
  flex: 1;
  overflow: auto;
}
section {
  flex-shrink: 0;
  height: 100%;
  padding: 10px;
  background: red;
  border: 1px solid pink;
}
footer {
  padding: 10px;
  background: yellow;
}
header {
  padding: 10px;
  background: orange;
}

<header>
 A header which<br>
 has 2 line of text
</header>
<div class="content">
  <section>
   1
  </section>
  <section>
   2
  </section>
  <section>
   3
  </section>
</div>
<footer>
 A footer which<br>
 has more lines of<br>
 text than the<br>
 header has and<br>
 it size nicley
</footer>