在开发网页时,有时我们需要让页面两边的内容不动,只让中间部分出现滚动条。这样可以提高页面的显示效果和用户体验。实现这个效果的方法有多种,下面我们来介绍一种使用CSS的方法。.container { w
在开发网页时,有时我们需要让页面两边的内容不动,只让中间部分出现滚动条。这样可以提高页面的显示效果和用户体验。实现这个效果的方法有多种,下面我们来介绍一种使用CSS的方法。
.container { width: 100%; height: 300px; overflow: hidden; } .content { width: 80%; height: 100%; margin: 0 auto; overflow-y: scroll; padding-right: 20px; box-sizing: content-box; }
以上是实现效果用到的CSS代码。具体解释下:
首先,我们需要一个容器来包含整个页面。我们给这个容器设置了一个宽度为100%和高度为300px,并且设置overflow为hidden。这样我们就能把页面宽度设置为100%而不被两侧的内容顶开。并且由于overflow被设置为hidden,所以超出容器宽度的内容也不会被显示。
接着,我们需要在容器中再添加一个内容框。这个内容框的宽度是80%,高度和容器一样。为了让它在容器中居中,我们设置了margin为0 auto。由于我们只希望内容框出现垂直方向的滚动条,所以我们设置了overflow-y为scroll。并且,为了不挤压滚动条的空间,我们还设置了padding-right: 20px。最后,再让盒子本身是content-box盒子模型,这样padding的值就不会改变元素的宽度了。
这样,就实现了页面中间出现滚动条的效果。我们只需要把需要出现滚动条的内容放在内容框中即可。
粉丝
0
关注
0
收藏
0