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

Question

我想放置2个固定的补充工具栏和一个中间的Content 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);
   });
});