javascript - 如何制作填充视口(viewport) 50% 的内容 block ？

Question

我的设计使用的内容 block 各占视口(viewport)的 50%。当您向下滚动时，会出现更多 50% 高的 block 。

在保持设计响应其他元素的同时，我很难实现这一点。我有一种设计它的方法，但是页脚与该方法不兼容。

这是我之前的设计:JSFiddle .如您所见，<main>调整为视口(viewport)的 100%，其余内容溢出。但是，添加页脚时会失败，因为它直接放置在视口(viewport)之后并遮挡了内容。

HTML:

<main>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
  <section>
    <p>
      Integer accumsan magna vitae velit lobortis blandit. Integer et ante augue. Ut ut vehicula ante. Donec eget finibus nibh. Aliquam sit amet ligula non ipsum facilisis efficitur. Mauris laoreet non diam sit amet imperdiet. Pellentesque eu risus luctus,
      accumsan dolor tempor, pellentesque massa. Pellentesque scelerisque fringilla tellus, nec commodo lorem commodo non.
    </p>
  </section>
</main>
<footer>
</footer>

CSS:

* {
  margin: 0;
  padding: 0
}

body,
html {
  height: 100%
}

main {
  height:100%
}

section:nth-child(even) {
  background: red
}

section:nth-child(odd) {
  background: green
}

section {
  height: 50%;
}
footer{
  background:rgba(0,0,0,0.5);
  position:relative;
  height:50%;
}

我怎样才能:

• 修改我以前的设计以容纳页脚

或

• 改变我的设计使得<main>不使用溢出，并延伸以容纳 <section>元素，保留其 50% 的视口(viewport)。 (这可能是更可能的选择，但我不知道该怎么做)。

感谢任何帮助!我卡住了。我愿意使用 Javascript 或 Jquery，但我更愿意将其保留为 HTML 和 CSS(除了浏览器回退)。

更新:VH 单元似乎运行良好，但在 IE8 或更早版本中不受支持。有人对如何设计回退有意见吗？

Answer 1

element{
height:50vh;
}

为此还有一个 flexbox 解决方案。我不太确定将高度设置为 .main 是理想的。两者都使用 100vh。