Question

我的设计使用的内容块分别是视口的50％。向下滚动时，会出现更多50％的高块。

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

这是我以前的设计：JSFiddle。如您所见，<main>被调整为视口的100％，其余内容变为溢出。但是，添加页脚时会失败，因为它直接放在视口后面并阻碍内容。

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％的视口。（这可能是更可能的选择，但我无法弄清楚如何做到这一点。）

感谢任何帮助！我被卡住了。我愿意使用Javascript或Jquery，但我更喜欢将它保留为HTML和CSS（除了浏览器后备）。

更新：VH单元似乎运行良好，但在IE8或更早版本中不受支持。任何人都有关于如何设计后备的意见？

Answer 1

element{
height:50vh;
}

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

如何制作填充视口50％的内容块？

1 个答案: