现在的网站多数都采用了响应式设计,使得网站能够在不同尺寸的设备上以最佳的方式展示。在移动设备上,我们通常会使用滚动来查看网页上的内容。但是,如果网页上有一部分内容需要始终保留在页面顶部,该怎么办呢?下
现在的网站多数都采用了响应式设计,使得网站能够在不同尺寸的设备上以最佳的方式展示。在移动设备上,我们通常会使用滚动来查看网页上的内容。但是,如果网页上有一部分内容需要始终保留在页面顶部,该怎么办呢?下面就是方法。
我们可以利用CSS来解决这个问题。通过设置固定定位和滚动定位两个层次,我们可以创建一个上部分不动,下部分滚动的页面。
html, body { height: 100%; margin: 0; padding: 0; } .header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: #f2f2f2; } .content { padding-top: 100px; /* 留出顶部固定的位置 */ overflow-y: scroll; /* 确保内容可滚动 */ height: calc(100% - 100px); /* 确保滚动区域占据剩下的高度 */ } .footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #f2f2f2; }
如上所示,我们首先将html和body元素的高度设为100%。接着,通过设置.header的position为fixed,使其始终保持在顶部。然后通过在.content元素上设置padding-top,确保页面的其余内容不会覆盖在.header上面。同时为了让.content可以滚动,我们还要为其设置overflow-y:scroll。最后,在.footer元素上设置position为fixed,并且将bottom属性设为0,让其留在页面底部。
粉丝
0
关注
0
收藏
0