頁面沒有采取100％的視圖高度

我有這個CSS，因爲我有兩個與fixed位置的靜態導航欄。但#page取得其內容的高度，而不是屏幕大小，因此它不滾動。頁面沒有采取100％的視圖高度

我已經嘗試過height:100vh;

的任何解決方案，使這一#page採取的觀點，因此使得滾動有用的所有可用空間？

#page { 
    position: relative; 
    margin-top: 110px; 
    margin-left: 220px; 
    padding: 15px 15px 15px 15px; 
    height: 100%; 
    overflow: scroll; 
}

導航欄

.navbar-right{ 
    width: 220px; 
    left: 0; 
    top: 0; 
    margin-top:110px; 
    position: fixed; 
} 

.navbar-top{ 
    border-bottom-color: #fe6803 !important; 
    border-bottom: 5px solid; 
    position: fixed; 
    height: 110px; 
    left: 0; 
    width: 100%; 
}

來源

2017-09-01 Pablo Casas

你試過'身高：100vh;' – Hash

是@哈希，以爲我寫下來了，我會編輯帖子。但不起作用 –

這將使該頁面填寫屏幕，並減去上述保證金：

#page { 
    position: relative; 
    margin-top: 110px; 
    margin-left: 220px; 
    padding: 15px 15px 15px 15px; 
    overflow: scroll; 
    height: calc(100vh - 110px); 
}

來源

2017-09-01 08:19:51 rblarsen

就像引入'calc'一樣。爲我工作，謝謝:) –

爲了使100％的高度的東西，這個元素的父親也需要有一個確定的高度。如果它是父級，則包括body和html元素。

因此，如果#page是另一個div內的div（我們稱之爲divA）。然後html，body，divA和#page需要用100％的高度來定義。

html, body { 
    height:100%; 
} 

#page { 
    position: relative; 
    margin-top: 110px; 
    margin-left: 220px; 
    padding: 15px 15px 15px 15px; 
    height: 100%; 
    overflow: scroll; 
}

在JSFiddle

這不同於在行爲從寬度寬常常是預先定義的，以100％的寬度，而高度是自動的。

來源

2017-09-01 08:26:15 Grumpy

頁面沒有采取100％的視圖高度

回答

相關問題