Question

我网站的各个部分是垂直堆叠的，每个部分中的内容都是使用flexbox垂直和水平居中。

每个部分应至少填满整个屏幕，但如果内容不适合，则应垂直增长。以下适用于IE11以外的所有主流浏览器（如果您愿意，可以使用fiddle。）

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  /* comment the following out to see the desired outcome */
  /* display: flex;
  flex-direction: column; */
}

section {
  /* relevant stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}


/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}

<section>
  I'm a section. Scroll down.
</section>
<section>
  I'm another section. Keep scrolling.
</section>
<section>
  The next section will expand to accommodate its contents.
</section>
<section>
  <!-- a bunch of dots -->
 .<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>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>
</section>
<section>
  If only it was this easy.
</section>

由于IE11的min-height错误，我使用了将Flex容器包装在另一个flex容器中的众所周知的解决方法。但是现在我的部分不再扩展以容纳其内容（如果您愿意，可以fiddle）。

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  /* comment the following out to see the desired outcome */
  display: flex;
  flex-direction: column;
}

section {
  /* relevant stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}


/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}
body {
  background: black;
}

<section>
  I'm a section. Scroll down.
</section>
<section>
  I'm another section. Keep scrolling.
</section>
<section>
  How did these dots get on me?
</section>
<section>
  <!-- a bunch of dots -->
 .<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>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>
  
</section>
<section>
  The sections aren't expanding!
</section>

什么是可以在IE11中运行的干净解决方案？它应该给我与第一个代码片段相同的结果，但在IE11中。

Answer 1

不使用标准百分比（通常依赖于父元素的指定高度），而是在浏览器之间进行不同的渲染，请考虑使用视口百分比单位，它只依赖于在视口尺寸上。

这应该是你所需要的。在Chrome，FF和IE11中测试过。

＆＃13;

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* NEW */
  
  /* unimportant aesthetic stuff */
  border: 1px solid white;
  background: #442;
  color: white;
  font-family: Calibri;
  font-size: 35px;
  padding: 0px 100px;
}

/* more unimportant aesthetic stuff */
section:nth-of-type(2n) {
  background: #553;
}

＆＃13;

<section>
  I'm a section. Scroll down.
</section>
<section>
  I'm another section. Keep scrolling.
</section>
<section>
  The next section will expand<br>to accommodate its contents.
</section>
<section>
  <!-- a bunch of dots -->
 .<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>.<br><br>.
 <br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
 <br><br>.<br><br>
</section>
<section>
  If only it was this easy.
</section>

＆＃13;

Revised Fiddle

来自规范：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

视口百分比长度是相对于的大小   初始包含块。当初始的高度或宽度   包含块被更改，它们会相应缩放。


vw unit - 等于初始包含块宽度的1％。

vh单位 - 等于初始包含高度的1％   块。

vmin unit - 等于vw或vh中的较小者。

vmax单位 - 等于vw或vh中的较大者。

Flex项目不会垂直扩展以容纳内容

1 个答案:

Revised Fiddle