顶部垂直空间上的固定位置div [英] Fixed position div on top vertical space

问题描述

我的情况是我在顶部的页面底部有固定位置的div，其高度百分比很高(请参见图片).问题是，当我将页面滚动到末尾时，其某些内容隐藏在此div下.我想我应该在页面底部添加空元素，但是最好的方法是什么?

My situation is that I have fixed position div with percented height at the bottom of page that is on top of it(see picture). The issue is that when I scroll page to the end, some of its content is hidden beneath this div. I think I should add empty element at the bottom of page, but what is the best way to do it?

推荐答案

一个不错的解决方案是将固定div的高度更改为用 vh 表示，而不用％(请参阅)，例如:

A nice solution could be to change the height of the fixed div to be expressed in vh not in % (see), for example:

div.fixed-at-bottom { height: 20vh; .... }

，然后将 margin-bottom 设置为具有相同值(或更多以获取更多空间)的内容div:

and then set a margin-bottom to your contents div with the same value (or a little more to get more space):

div.content { margin-bottom: 22vh; .... }

我创建了一个 jsfiddle 进行演示.

I created a jsfiddle to present that.

这篇关于顶部垂直空间上的固定位置div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！