Question

我正在尝试在页面上的2个元素上添加独立overflow-y滚动：#sidebar和#my-modules中的主要内容。

正如您在 JSFiddle 中看到的那样，它似乎无法正常工作。滚动条出现在整个文档中，这不是我想要的。我希望设计能够在没有任何滚动条的情况下占据浏览器的全部高度。 #sidebar和#my-modules中的任何溢出内容都应该获得滚动条。我也无法弄清楚如何在模块之间添加均匀的边距。

HTML：

<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>

CSS：

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;
}

Answer 1

如果在#my-modules上设置高度。你会得到一个滚动条。由于您未设置高度，因此div只会展开以适合内容。

边栏和内容上的独立溢出y滚动

1 个答案: