两个固定的响应侧边栏和一个可滚动的内容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);
   });
});