CODEWITHSUNDEEP
htmlcss
fishera
fishera

Reputation: 799

Scroll bar doesn't reach bottom

.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>

When the div consist from big texts scroll bar appears but it doesn't scroll to the end of the text. I ahve created fiddle where you can see what I am talking about. In the example the end of the text is "gggggg60" but scroll reaches until "gggggg55". Any suggestions how to fix this issue? link to fiddle

Upvotes: 1

Views: 5495

Answers (4)

user1412699
user1412699

Reputation: 1994

Use position:relative in flipper-back div

See updated fiddle http://jsfiddle.net/L9ep8rmq/2/

position:relative

Upvotes: 1

Surreal Dreams
Surreal Dreams

Reputation: 26380

Here's the problem: overflow: hidden. That will prevent the browser from creating a scroll bar to show the content. Also, the height: 100% isn't helping either. Removing either style (or preferably both) results in your full set of text displaying with a scrollbar no matter how big your browser is.

Upvotes: 0

SVK
SVK

Reputation: 2197

check this Updated link.

code:

<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>

Upvotes: 0

Quentin
Quentin

Reputation: 943217

Don't limit the height of the div to the height of the viewport while forbidden scrolling within it.

Remove height: 100% or overflow: hidden.

Upvotes: 0

Related Questions