如何防止固定的底部栏隐藏内容

我有一个固定的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

如何防止固定的底部栏隐藏内容

回答

相关问题