替代100vh固定定位元件？

我有一個div (top navigation)嵌套在flex容器內。當top-nav展開時，我希望它佔據視口的整個高度。我知道這可以通過將高度設置爲100vh來實現，但它並未得到廣泛支持。所以，我需要一個更傳統的方式來實現這一點。替代100vh固定定位元件？

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

我有現在的問題是：

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

有沒有辦法實現這個（除了設置高度100vh）？

來源

2017-10-19 Himanshu Arora

如果你的元素是身體的直接子元素，我認爲你的代碼應該可以正常工作。但我相信'vh'和'vw'得到了廣泛的支持。 –

不是元素不是身體的直接孩子。 –

諸如vh和vw之類的視口單元是well supported;使用它們。

另一種替代方法是將位置設置爲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>

無論使用哪個單位，頁面總是要能夠擴大資產淨值的背後滾動。這不應該是一個問題，如果你的導航欄也被賦予了一個固定的位置，所以它可以跟隨。

來源

2017-10-19 17:23:45 Soviut

設置底部0與100％做同樣的事情。已經嘗試過了。 –

@HimanshuArora如果您要設置「底部」，您必須確保*移除高度。我已經更新了一個工作示例。 – Soviut

是的，我確實刪除了高度100％。我有內容溢出的身體（因此頁面滾動），在這種情況下設置底部爲0工作嗎？它不適合我。 –

替代100vh固定定位元件？

回答

相關問題