Question

我有一个关于CSS的查询，我很难想出来。

这是HTML：

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

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

例如我有一个类'a'的div。如果溢出，我希望整个div可以滚动。另外，我希望带有类'c'的div可以滚动，但是我希望带有类'b'的div在页面上保持固定。即使为其他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的某些部分设置为可滚动

1 个答案: