固定位置元素可替代100vh？

Question

我有一個嵌套在flex容器中的div (top navigation) 。 當top-nav擴展時，我希望它占據視口的整個高度。 我知道可以通過將高度設置為100vh來實現，但並未得到廣泛支持。 因此，我需要一種更傳統的方式來實現這一目標。

html和body的height 100%但是視圖的內容溢出了，我可以滾動頁面。

我現在所擁有的是：

.top-nav .top-nav-links-wrapper {
    position: fixed;
    width: 100%;
    background-color: #fff;
    top: 50px;
    left: 0;
    height: 100%;        
}

有沒有辦法做到這一點（除了將height設置為100vh ）？

Answer 1

vh和vw等視口單元得到了很好的支持 ； 使用它們。

另一種選擇是將位置設置為fixed並設置bottom: 0 。 height假定父元素的高度，並且不考慮位置，邊距或填充； bottom假定從父容器的底部偏移。 width vs right 。 請記住，您不應同時使用height和bottom ，否則它們會相互覆蓋。

這是一個工作示例。

 .fullscreen { position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: cornflowerblue; } .body { height: 2000px; } 

 <div class="fullscreen">this will be fullscreen with a top offset</div> <div class="body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed arcu quis dui congue pulvinar. Ut scelerisque suscipit ipsum, in elementum velit aliquet sit amet. Nulla tempus iaculis vestibulum. Mauris eu odio id dui consectetur blandit facilisis nec metus. Nullam laoreet risus et aliquam viverra. Sed eu imperdiet metus. Vivamus at dui turpis.</p> </div> 

無論使用哪種單位，頁面始終可以在展開的導航后滾動。 如果您的導航欄也具有固定位置，那么它就可以跟隨前進，這應該不是問題。

Answer 2

強烈建議不要在網頁中使用vw / vh 。 Safari對它們的支持非常差，尤其是對於iPhoneX *而言。

另一個答案提供了一個可靠的選擇，使用position ， top ， right ， bottom和left 。

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

將使用默認位置static之外的其他位置占據第一祖先的100％。

使用position: fixed將占據整個布局視口。

如果您在iPhoneX上使用了該標記，則100vw會在iOS Safari的度量標准中包含該標記，即使您的DOM不包含該標記。

100vh不是您在iOS Safari上所期望的（它的視口高度略高於100）。

window.innerHeight/Width和document.documentElement.clientHeight/Width是Safari中的另一個一致性夢night，但這又是一個話題。

我在一個擁有十億用戶的網站上工作，因此不得不禁止我的團隊在我們的代碼中使用vw / vh 。