我在應用程序中有固定頁腳。 當內容比屏幕高度大時，它會爲其添加一個滾動條。但我無法看到內容的結尾，因爲它位於頁腳的下方，並且頁腳被固定不允許我滾動或查看它。
請注意：頁腳的高度實際上是未知的，我有其他固定的div創建在頁腳運行時之上。所以內容應該可以在底部的所有固定div上滾動。使可變高度的固定頁腳滾動整個內容
JS搗鼓相同：https://jsfiddle.net/wfck8y8n/
在小提琴以下代碼獲取由於固定頁腳的隱藏。
<div>I might get hidden because of footer</div>
如何使這只是使用CSS可見？
將所有內容放入內容包裝並將高度定義爲80vh（因爲頁腳爲20vh）。
body {
padding: 0;
}
#footer {
position: fixed;
bottom: 0;
background-color: black;
color: white;
width: 100%;
height: 20vh;
}
.content {
height: 80vh;
}
.content div {
min-height: 120px;
}<div class="content">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>I might get hidden because of footer</div>
<div>I might get hidden because of footer</div>
<div>I might get hidden because of footer</div>
</div>
<div id="footer">
I am footer
</div>頁腳的高度實際上是未知的，我有其他固定的div創建在頁腳運行時的上方。我將在問題中更新相同的 –
你需要的是作爲內容越吹推頁腳：
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20vh; /*the bottom margin = -(footer's height)*/
}
.push, #footer {
height: 20vh;
}
#footer {
position : fixed;
bottom : 0;
background-color : black;
color : white;
width : 100%;
}
.content div{
min-height: 120px;
}<div class="wrapper">
<div class="content">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
<div>I might get hidden because of footer</div>
<div>I might get hidden because of footer</div>
<div>I might get hidden because of footer</div>
<div class="push"></div>
</div>
<div id = "footer">
I am footer
</div>我想實現這可能是由除頁腳div所有部分包裹的最簡單方法，然後添加到封裝一個margin-bottom規則，該規則以像素爲單位表示頁腳的高度。
我做了一個Codepen demo，我希望它有幫助。
將填充添加到與固定頁腳相同高度（或更高）的內容底部。 –
將'padding-bottom：20vh;'（與頁腳高度相同）添加到'body' –
向內容添加填充底部，以便頁腳僅覆蓋填充。 – Nekomajin42