Html 侧边栏和内容上的独立Overflow-y滚动

我试图在我的页面上添加独立的

overflow-y

滚动元素：侧边栏

和
#my modules
中的主要内容

正如您在本中所看到的，它似乎不起作用。滚动条出现在整个文档上，这不是我想要的。我想要的设计，以充分发挥浏览器的高度没有任何滚动条。
#侧边栏
和
#我的模块
中的任何溢出内容都应获得滚动条。我也不知道如何在模块之间添加甚至是边距

HTML:

如果您在“我的模块”上设置高度。你会得到一个滚动条。因为您没有设置高度，所以div只会扩展以适合内容。
如果您在“我的模块”上设置高度。你会得到一个滚动条。因为您没有设置高度，所以div只会扩展以适应内容。
您说得对-这很有效！任何关于如何在
#my modules
中的模块之间获得偶数边距的想法都取决于偶数边距的含义。如果你用百分比设置宽度，那么我也会用百分比设置边距。您只需要根据边距计算模块宽度。如果您想要固定大小的间距，那么我可能会做一些类似于
width:calc（30%-40px）；利润率：0.20px例如，好的，让我试试这个。我的意思是，我只想在模块之间增加一些间距。如果我使用
margin:10px然后，如果某些模块位于彼此的顶部或底部，则它们最终将达到20px。这取决于您的设计。你可以这样做：但它可能并不完全适合你。Flexbox会很好地解决这个问题，如果你以前没有看过的话，现在肯定是个好时机。我最终使用了
width:calc（）
和
margin
的组合，就像你建议的那样，在我的模块之间有均匀的间距。你说得对-这很有效！任何关于如何在
#my modules
中的模块之间获得偶数边距的想法都取决于偶数边距的含义。如果你用百分比设置宽度，那么我也会用百分比设置边距。您只需要根据边距计算模块宽度。如果您想要固定大小的间距，那么我可能会做一些类似于
width:calc（30%-40px）；利润率：0.20px例如，好的，让我试试这个。我的意思是，我只想在模块之间增加一些间距。如果我使用
margin:10px然后，如果某些模块位于彼此的顶部或底部，则它们最终将达到20px。这取决于您的设计。你可以这样做：但它可能并不完全适合你。Flexbox会很好地解决这个问题，如果你以前没有看过的话，现在肯定是一个好时机。我最终使用了
width:calc（）
和
margin
的组合，正如你建议的那样，在我的模块之间有均匀的间距。
<div id="top-bar" class="grid wrap">
  <div class="unit whole">
    <p>Top Bar</p>
  </div>
</div>

<div id="content" class="grid wrap">

  <div id="sidebar" class="unit one-fifth">
    <p>Sidebar</p>
  </div>

  <div id="my-modules">
    <div class="unit one-third module">
      <p>Module 1</p>
    </div>
    <div class="unit one-third module">
      <p>Module 2</p>
    </div>
    <div class="unit one-third module">
      <p>Module 3</p>
    </div>
    <div class="unit half module">
      <p>Module 4</p>
    </div>
    <div class="unit half module">
      <p>Module 5</p>
    </div>
    <div class="unit whole module">
      <p>Module 6</p>
    </div>
  </div>
</div>

body,
html {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 0.875em;
  padding: 0;
  margin: 0;
}

#top-bar,
#sidebar,
.module {
  background: rgba(0, 0, 0, 0.1);
}

#content {
  height: 100%;
}

#sidebar {
  height: 100%;
}

#my-modules {
  float: left;
  width: 80%;
  padding: 0;
  overflow-y: auto;
}

.module {
  height: 220px;
}