Apple.com Hero/Front 页面横幅区域 CSS

Question

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

底部有 4 个促销的英雄横幅，当您缩放促销时，促销设置为底部，英雄横幅似乎有最大高度。

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

谁知道有没有类似的英雄横幅framework/library？

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

干杯

Answer 1

这是再现 apple.com 主页主要方面的笔：http://codepen.io/PhilippeVay/pen/XjQwVv

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

关于 vh and 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>

Apple.com Hero/Front 页面横幅区域 CSS

Apple.com Hero/Front Page Banner Area CSS

css

fullscreen

responsive