如何防止固定的底部欄隱藏內容

我有一個固定的div覆蓋了當用戶向下滾動時頁面底部的內容。這特別影響移動設備。我已經重新這裏的問題：http://codepen.io/bkuhl/pen/LWjXdx 如何防止固定的底部欄隱藏內容

下面是該職位代碼：

<div class="main-content"> 
    Test Content 
    <div class="content-suffix"> 
     Copyright 
    </div> 
    </div> 
    <div class="fixed-bottom-bar"> 
    I'm covering up the Copyright text 
    </div>

和CSS：

.main-content { 
    width: 100%; 
    min-height: 400px; 
    background-color: darkgrey; 
} 
.content-suffix { 
    padding-top: 350px; 
} 
.fixed-bottom-bar { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    padding: 1em; 
    width: 100%; 
    background-color: blue; 
}

一種方法我也想過是添加[padding|margin]-bottom到內容後綴，但在這種情況下，我在固定元素上的內容具有可變長度。

如何確保「版權」文本未被固定元素覆蓋，請記住fixed-bottom-bar有可變文本長度？

來源

2017-03-15 Webnet

添加內容 - 後綴 – Dev

一個邊距如果您的頁腳是在高度動態的，你可以嘗試使用jquery爲獲得在運行時的高度，然後應用CSS還使用jQuery – Swellar

您可以使用100vh高的柱狀柔性佈局並將內容區域設置爲'flex-grow：1'和'overflow-y：scroll'，從而爲頁腳留出可變高度的人造固定頁腳。像這樣的工作？ http://codepen.io/mcoker/pen/JWyeqW –

如果頁腳是簡單的，你可以在內容的底部添加它，讓它隱藏因此將需要空間，但不會顯示。

.main-content { 
 
    width: 100%; 
 
    background-color: darkgrey; 
 
} 
 
.content { 
 
    display: flex; 
 
    align-items: flex-end; 
 
    height: 400px; 
 
} 
 

 
.bottom-bar { 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 

 
.bottom-bar.space { 
 
    visibility: hidden; /* hides the element but keeps it space*/ 
 
} 
 

 
.bottom-bar.fixed { 
 
    position: fixed; 
 
    bottom: 0; 
 
}

<div class="main-content"> 
 
    <div class='content'>Test Content</div> 
 

 
    <div class="bottom-bar space"> 
 
    I'm covering up the<br> Copyright text 
 
    </div> 
 
    <div class="bottom-bar fixed"> 
 
    I'm covering up the<br> Copyright text 
 
    </div> 
 

 
    </div>

來源

2017-03-15 11:03:38

啊 - 所以你說基本上顯示它兩次，一旦隱藏，所以它永遠不會重疊？ – Webnet

您可以使用css calc()屬性來實現此目的。添加margin-bottom: calc(/* the values you want to calculate */);您尚未設置字體大小，但默認值爲16px。因此，您需要將填充添加到內容後綴的底部，後綴爲16px + 2em，即頁腳的總高度。你的最終代碼是：

.content-suffix { 
    padding-top: 350px; 
    margin-bottom: calc(16px + 2em); 
}

如果你指定了文本的字體大小，這會更好。這可能是一個動態值（例如1vw，1em等），這仍然有效。

來源

2017-03-15 03:39:16

如果你有沒有限制使用JavaScript的，看看下面的代碼：

var x = 
 
    document.getElementsByClassName("fixed-bottom-bar"); 
 

 
document.getElementById("forged-fixed-bottom-bar").style.height = "" + x[0].offsetHeight + "px";

.main-content { 
 
    width: 100%; 
 
    min-height: 400px; 
 
    background-color: darkgrey; 
 
} 
 

 
.content-suffix { 
 
    padding-top: 350px; 
 
} 
 

 
.fixed-bottom-bar { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    padding: 1em; 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 

 
#forged-fixed-bottom-bar { 
 
    height: 20px 
 
}

<div class="main-content"> 
 
    Test Content 
 
    <div class="content-suffix"> 
 
    Copyright 
 
    </div> 
 
</div> 
 

 
<div id="forged-fixed-bottom-bar"> 
 
</div> 
 

 
<div class="fixed-bottom-bar"> 
 
    I'm covering up the Copyright text 
 
</div>

來源

2017-03-15 04:29:30 ata

您需要設置位置absolute，給溢出-Y會更加美好和計算值你的身高。

.main-content { 
 
    width: 100%; 
 
    height : calc(100% - 94px) !important; 
 
    background-color: darkgrey; 
 
    overflow-y : auto; 
 
    position:absolute; 
 
} 
 
.content-suffix { 
 
    padding-top: 350px; 
 
} 
 
.fixed-bottom-bar { 
 
    position: fixed; 
 
    bottom: 0; 
 
    height : 50px; 
 
    right: 0; 
 
    padding: 1em; 
 
    width: 100%; 
 
    background-color: blue; 
 
}

<div class="main-content"> 
 
    Test Content 
 
    <div class="content-suffix"> 
 
     Copyright 
 
    </div> 
 
    </div> 
 
    <div class="fixed-bottom-bar"> 
 
    I'm covering up the Copyright text 
 
    </div>

來源

2017-03-15 04:49:05

如何防止固定的底部欄隱藏內容

回答

相關問題