css 上下固定 中间滚动

CSS中，实现上下固定，中间滚动的效果很常见，如新闻列表、网页导航等等。

要实现这种布局，可以使用position属性来实现上下固定的效果，再使用overflow属性来实现滚动效果。

.header {
    position: fixed;
    top: 0;
    width: 100%;
}
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
.content {
    position: relative;
    overflow-y: auto;
    top: 50px;
    bottom: 50px;
}
    

在上面的代码中，.header和.footer分别实现了固定在页面顶部和底部的效果。而 .content则是固定在中间区域并且允许纵向滚动。

使用“top: 50px”和“bottom: 50px”分别指定了.content距离.header和.footer的距离，以防止内容区域遮挡.header和.footer。

最后，当.content内的内容过多时，就会自动出现纵向滚动条，允许用户滚动查看内容。

因此，使用CSS实现上下固定，中间滚动的布局效果非常方便简洁，可用于多种场景下的网站布局。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！