html - 滚动条没有到达底部

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 由大文本组成时，出现滚动条但没有滚动到文本末尾。我创建了 fiddle ，您可以在其中看到我在说什么。在示例中，文本的末尾是 "gggggg60"，但滚动到 "gggggg55"。任何建议如何解决这个问题？ link to fiddle

Answer 1

在 flipper-back div 中使用 position:relative

查看更新的 fiddle http://jsfiddle.net/L9ep8rmq/2/

position:relative