javascript - 响应式设计中间的两个固定的响应式侧边栏和一个可滚动的内容 div

Question

我想放置 2 个固定的侧边栏和一个中间的内容 div，所以当我滚动时内容正在滚动。我可以使用溢出滚动，但是我在中间的 div 中有滚动条，这有点难看。

这里为了更好的理解一个概念:


所以我已经尝试了一些但无法找到一个好的稳定解决方案。

感谢您的帮助。

Answer 1

据我了解，您正在寻找类似这样的东西CODEPEN

所以两个侧边栏是固定的:

.leftside {
   position: fixed;
   left: 10%;
   top: 150px;
   height: 300px;
   width: 10%;
   background: #ccc;
}
.rightside {
   position: fixed;
   right: 10%;
   top: 150px;
   height: 300px;
   width: 10%;
   background: #ccc;
}

对于可滚动的:

.scrollable {
  position: relative;
  top: 10px;
  height: 1000px;
  width: 60%;
  margin: 0 auto;
  background: green;
}

如果你希望中间的div是固定的，但里面的内容会四处移动，那么你只需要在.scrollable中添加:

overflow: scroll;

你还需要添加这段 jquery 代码来根据窗口大小改变 div 的高度:

$(document).ready(function() {
   $(".leftside, .rightside").height($(window).height()-100);
   $(".scrollable").height($(window).height()-40);
   $(window).resize(function() {
       $(".leftside, .rightside").height($(window).height()-100);
       $(".scrollable").height($(window).height()-40);
   });
});