[分享]css两边不动只中间出现滚动条

在开发网页时，有时我们需要让页面两边的内容不动，只让中间部分出现滚动条。这样可以提高页面的显示效果和用户体验。实现这个效果的方法有多种，下面我们来介绍一种使用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的值就不会改变元素的宽度了。

这样，就实现了页面中间出现滚动条的效果。我们只需要把需要出现滚动条的内容放在内容框中即可。