Question

我正在尝试创建一个div，它在其上设置了height: auto and max-height:(heightpx);的div内滚动其内容。我注意到如果我将高度设置为一个值并删除它的最大高度。

<div style="height:auto; max-height:200px; background:red;">
<div class="fill">
    <div class="fill">
        <div class="fill">
            <div class="scrolly" style="height: calc(100% - 45px)">
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
                <div>hello</div>
            </div>
        </div>
    </div>
</div>

.scrolly {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}

.fill {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

这是一个jsfiddle http://jsfiddle.net/szze6a66/

Answer 1

overflow-y：auto

<div style=" max-height:200px; background:red; overflow-y:auto">

http://jsfiddle.net/djktzyec/

希望这会有所帮助

Answer 2

您只需要overflow-y: auto并设置身高。

.scrolly {
    overflow-y: auto;
    position: relative;
    max-height: 200px;
}

Answer 3

您已将scrolly类应用于错误的div。从示例中的div中删除它并将其添加到父div。

Answer 4

由于主div有max-height:200px，您可以将.scrolly类的标记设置为max-height: 200px，然后滚动而不是溢出容器。

＆＃13;

.scrolly {
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  max-height: 200px;
}
.fill {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div style="height:auto; max-height:200px; background:red;">
  <div class="fill">
    <div class="fill">
      <div class="fill">
        <div class="scrolly">
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
          <div>hello</div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

在设置了max-height的div内滚动div

4 个答案: