Apple.com英雄/頭版橫幅位置CSS

Question

我建立具有類似apple.com主頁的首頁，

英雄旗幟在底部4個宣傳片，當你縮放宣傳片是設置到底部，英雄橫幅看起來像它有一個最大高度。

我試圖複製代碼並模仿它沒有運氣。

任何人都知道，如果英雄橫幅框架/庫類似這樣？

我知道這個問題可能會降低音量，但我找不到類似的簡單例子。

乾杯

Answer 1

這裏有筆重現apple.com主頁的主要方面：http://codepen.io/PhilippeVay/pen/XjQwVv

的關鍵是主要產品中使用的高度屬性：height: calc(100vh - 200px)每個在底部的4個環節：height: 200px 。
總高度100vh，視口約vh和calc

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