Question

.flipper-back {
  background: #FFF none repeat scroll 0% 0%;
}
.flipper-back {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
}
.flipper-back {
  display: block;
  backface-visibility: hidden;
  transition: transform 1s ease 0s;
}
.pad-box {
  padding: 40px 35px 45px 45px;
}
.pad-30-0-0 {
  padding: 30px 0px 0px;
}


<div style="height: 100%; overflow: hidden;" class="flipper-back">

  <a id="csFlipperClose" href="#" class="js-flipper-flip flipper-close"></a>

  <div style="height: 100%; overflow: auto; margin-right: -10px;" class="pad-box">
    <h3 class="colored">Customer support</h3>

    <div class="pad-30-0-0">
      <b><span id="csSelectedIssue">Test</span></b>

      <br>
      <br>
      <span id="csSelectedReadMore">large text </span>
    </div>

  </div>
</div>

当div由大文本组成时，滚动条会出现，但不会滚动到文本的末尾。我创造了小提琴，你可以看到我在说什么。在示例中，文本的结尾是“gggggg60”，但滚动到达“gggggg55”。有任何建议如何解决这个问题？ link to fiddle

Answer 1

在鳍状肢 div中使用位置：相对

请参阅更新的小提琴http://jsfiddle.net/L9ep8rmq/2/

position:relative

Answer 2

在禁止在其中滚动时，不要将div的高度限制为视口的高度。

删除height: 100%或overflow: hidden。

Answer 3

检查此Updated link。

代码：

<div style="height: 100%;" class="flipper-back">

                        <a id="csFlipperClose" href="#" class="js-flipper-flip flipper-close"></a>

                        <div style="height: 100%; overflow: auto; margin-right: -10px;" class="pad-box">
                            <h3 class="colored">Customer support</h3>

                            <div class="pad-30-0-0">
                                <b><span id="csSelectedIssue">Test</span></b>

                                <br><br>
                                <span id="csSelectedReadMore">gggggggg  gggggggg  gggggggg  ggggggg1  gggggggg  gggggggg  gggggggg  ggggggg2  gggggggg  gggggggg  gggggggg  ggggggg3  gggggggg  gggggggg  gggggggg  ggggggg4  gggggggg  gggggggg  gggggggg  ggggggg5  gggggggg  gggggggg  gggggggg  ggggggg6  gggggggg  gggggggg  gggggggg  ggggggg7  gggggggg  gggggggg  gggggggg  ggggggg8  gggggggg  gggggggg  gggggggg  ggggggg9  gggggggg  gggggggg  gggggggg  gggggg10  gggggggg  gggggggg  gggggggg  gggggg11  gggggggg  gggggggg  gggggggg  gggggg12  gggggggg  gggggggg  gggggggg  gggggg13  gggggggg  gggggggg  gggggggg  gggggg14  gggggggg  gggggggg  gggggggg  gggggg15  gggggggg  gggggggg  gggggggg  gggggg16  gggggggg  gggggggg  gggggggg  gggggg17  gggggggg  gggggggg  gggggggg  gggggg18  gggggggg  gggggggg  gggggggg  gggggg19  gggggggg  gggggggg  gggggggg  gggggg20  gggggggg  gggggggg  gggggggg  gggggg21  gggggggg  gggggggg  gggggggg  gggggg22  gggggggg  gggggggg  gggggggg  gggggg23  gggggggg  gggggggg  gggggggg  gggggg24  gggggggg  gggggggg  gggggggg  gggggg25  gggggggg  gggggggg  gggggggg  gggggg26  gggggggg  gggggggg  gggggggg  gggggg27  gggggggg  gggggggg  gggggggg  gggggg28  gggggggg  gggggggg  gggggggg  gggggg29  gggggggg  gggggggg  gggggggg  gggggg30  gggggggg  gggggggg  gggggggg  gggggg31  gggggggg  gggggggg  gggggggg  gggggg32  gggggggg  gggggggg  gggggggg  gggggg33  gggggggg  gggggggg  gggggggg  gggggg34  gggggggg  gggggggg  gggggggg  gggggg35  gggggggg  gggggggg  gggggggg  gggggg36  gggggggg  gggggggg  gggggggg  gggggg37  gggggggg  gggggggg  gggggggg  gggggg38  gggggggg  gggggggg  gggggggg  gggggg39  gggggggg  gggggggg  gggggggg  gggggg40  gggggggg  gggggggg  gggggggg  gggggg41  gggggggg  gggggggg  gggggggg  gggggg42  gggggggg  gggggggg  gggggggg  gggggg43  gggggggg  gggggggg  gggggggg  gggggg44  gggggggg  gggggggg  gggggggg  gggggg45  gggggggg  gggggggg  gggggggg  gggggg46  gggggggg  gggggggg  gggggggg  gggggg47  gggggggg  gggggggg  gggggggg  gggggg48  gggggggg  gggggggg  gggggggg  gggggg49  gggggggg  gggggggg  gggggggg  gggggg50  gggggggg  gggggggg  gggggggg  gggggg51  gggggggg  gggggggg  gggggggg  gggggg52  gggggggg  gggggggg  gggggggg  gggggg53  gggggggg  gggggggg  gggggggg  gggggg54  gggggggg  gggggggg  gggggggg  gggggg55  gggggggg  gggggggg  gggggggg  gggggg56  gggggggg  gggggggg  gggggggg  gggggg57  gggggggg  gggggggg  gggggggg  gggggg58  gggggggg  gggggggg  gggggggg  gggggg59  gggggggg  gggggggg  gggggggg  gggggg60  </span>
                            </div>

                        </div>
                    </div>

Answer 4

问题在于：overflow: hidden。这将阻止浏览器创建滚动条来显示内容。此外，height: 100%也没有帮助。删除任一样式（或最好是两者）都会导致您的整个文本集显示滚动条，无论您的浏览器有多大。

滚动条未到达底部

4 个答案: