Apple.com 英雄/首页横幅区域 CSS [关闭]

Question

我正在建立一个类似于 apple.com 主页的主页，

底部有 4 个宣传片的英雄横幅，当您缩放宣传片时，宣传片设置到底部，英雄横幅似乎有一个最大高度。

我试图复制代码并模仿它，但没有成功。

谁知道有没有类似这样的英雄横幅框架/库？

我知道这个问题可能会被否决，但我找不到类似的简单示例。

干杯

Answer 1

这是一个重现 apple.com 主页主要方面的 Pen：http://codepen.io/PhilippeVay/pen/XjQwVv

关键是主产品上使用的高度属性：height: calc(100vh - 200px) 和底部 4 个链接中的每一个：height: 200px。
总高度为 100vh，视口（窗口或设备）的高度

关于 vh 和 calc 的 MDN 文档

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/* Heights and layout */
main {
  max-width: 40rem;
  margin: auto; /* centering the demo*/
  background-color: #f0f0f0;
}
section {
  height: calc(100vh - 200px); /* <-- */
  padding-top: 2rem;
  text-align: center;
}
ul {
  display: flex;
  margin: 0;
  padding-left: 0;
}
li {
  list-style-type: none;
  width: 25%;
}
a {
  display: block;
  height: 200px; /* <-- */
  border: 1px solid violet;
  text-decoration: none;
  text-align: center;
  line-height: 200px;
  font-size: 3rem;
}

<main>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A totam temporibus beatae veritatis ipsam, necessitatibus quibusdam dolorem molestias assumenda! Aut maiores magni ratione libero quisquam omnis, iure ab reprehenderit dolore.</section>
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</main>