防止在固定位置元素后面滚动

时间:2017-10-12 15:09:47

标签: html css

我的页面底部有一个设置高度的页脚。是否可以滚动页面内容使其终止于固定页脚的顶部?

我的问题的一个小问题:fiddle

非固定元素的最后250px(页脚高度)在页脚后面滚动,当滚动条碰到页面底部时看不到。

<div style="height: 500px; width: 50%; background-color: yellow;"></div>
<div style="height: 500px; width: 50%; background-color: blue;"></div>
<div style="height: 500px; width: 50%; background-color: green;"></div>

<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;">
  Fixed Footer
</div>

2 个答案:

答案 0 :(得分:1)

在最后一个DIV上添加250px的边距底部

<div style="height: 500px; width: 50%; background-color: green; margin-bottom:250px;">
</div>

答案 1 :(得分:1)

这是你需要做的事情,但是你需要编写CSS,如果你单独编写CSS而不是给div设置样式属性会很好。

  

为了解决您的问题,我们需要将溢出设置为隐藏   详细了解这些属性here.

&#13;
&#13;
body,
html{
    overflow: hidden;
    margin: 0;
    padding: 0;
    }
&#13;
<div style="height: 500px; width: 50%; background-color: yellow;"></div>
<div style="height: 500px; width: 50%; background-color: blue;"></div>
<div style="height: 500px; width: 50%; background-color: green;"></div>

<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;">
  Fixed Footer
</div>
&#13;
&#13;
&#13;