仅将 div 的某些部分设置为可滚动

Question

我有一个关于 CSS 的问题，我很难弄明白。

这里是HTML：

<div class='a'>
      <div class='b'>
      </div>

      <div class='c'>
      <div>
</div>

例如我有一个 div 和一个 class 'a'。我希望整个 div 在溢出时可以滚动。此外，我希望 div 和 class 'c' 滚动，但我希望 div 和 class 'b' 保持固定在页面上。即使为其他 div 提供了滚动，它也应该出现在相同的位置。

谁能告诉我一个方法，如果有的话？

Answer 1

不确定您想要哪种布局，但您希望在 css 中使用 overlow-y:scroll;。您想要滚动的 div 需要附加特定的高度。

我创建了一个 .a 可滚动的示例，.c 也是如此。 .b 将留在顶部，除非您在 .a 中向下滚动太远。

如果您希望 .b 即使在 .a 中向下滚动时也可见，那么您将不得不使用 position:fixed 进行一些非直观的定位。

JSFiddle example

<style media="screen">
    .a{
        height: 200px;
        overflow-y: scroll;
        border: 1px solid black;
    }
    .b {
        margin: 10px;
        border: 1px solid blue;
    }
    .c {
        height: 150px;
        overflow-y: scroll;
        background: #ddd;
    }
</style>
<div class='a'>
      <div class='b'>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
      </div>

      <div class='c'>
          eiusmod <br> tempor incididunt <br> ut labore et dolore magna <br> aliqua. <br> <br> Ut enim ad minim veniam, quis <br> nostrud exercitation <br> ullamco laboris nis<br> i ut aliquip ex ea commodo<br>  consequat. Duis aute irure dolor in<br>  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class='d'>
          eiusmod <br> tempor incididunt <br> ut labore et dolore magna <br> aliqua. <br> <br> Ut enim ad minim veniam, quis <br> nostrud exercitation <br> ullamco laboris nis<br> i ut aliquip ex ea commodo<br>  consequat. Duis aute irure dolor in<br>  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
</div>

仅将 div 的某些部分设置为可滚动

Make only certain section of the div as scrollable

html

css

styles

overflow