Question

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

底部有4张宣传片的英雄横幅，当你缩放宣传片时，它们设置在底部，英雄横幅看起来像是有最大高度。

我试图复制代码并模仿它没有运气。

任何人都知道是否有类似于此的英雄横幅框架/库？

我知道这个问题可能会失败，但我找不到类似的简单例子。

干杯

Answer 1

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

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

关于vh和calc

的MDN文档

height: 200px

* {
  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;
}

Apple.com英雄/首页横幅区域CSS

1 个答案: