制作2列布局。 （类似于https://medium.com/）

Question

尝试制作2列布局。示例https://medium.com/

滚动时左侧边栏不移动。此外，如果您的鼠标位于侧边栏上，则无法滚动主要内容。

我该如何实现它。我一整天都在努力。

由于

Answer 1

Working FIDDLE Demo

HTML

<div class="wrapper">
    <div class="sidebar">
        SIDE
    </div>
   <div class="main">
       CONTENT
    </div>
</div>

CSS

.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.main {
    background: red;
    height: 100%;
    overflow: auto;
}
.sidebar {
    background: blue;
    width: 200px;
    height: 100%;
    float: left;
    overflow: auto;
}