避免页面上多个滚动条的最佳方法是什么？

Question

我有一个顶级菜单栏，补充工具栏和主要内容区域的页面。 顶部菜单栏位于固定。 主要内容区域具有绝对位置，它包含许多小部件。 现在当小部件的数量增加时，内容区域的高度变得大于浏览器的窗口高度，因此内容区域的第二个滚动条出现在窗口滚动条之前。

有没有办法在主内容区域使用窗口滚动条？

.menubar{
    height: 50px;
}


.sidebar{
    left: 4px;
    position: absolute;
    top: 100px;
}

.content{
    position: absolute;
    overflow: auto;
    top: 47px;
    left: 0;
    bottom: 0;
    right: 0;
}

Answer 1

要避免浏览器窗口滚动条设置body和html设置为overflow:hidden。

仅将主要内容区域设置为overflow-y: scroll（始终显示滚动条）。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

要设置主要内容和侧边栏的高度，

.side-bar,
.main {
  height: calc(100% - 50px); 
}

对于这种布局，float可以绝对处理它。 position:absolute肯定是矫枉过正的。