CODEWITHSUNDEEP
htmlcss
ml92
ml92

Reputation: 451

Why I can't see bottom of scroller bar

I have problem with bottom of scroller bar, I don't have arrow down.

Also I added overflow-y:scroll !important;

http://jsfiddle.net/nzguLb3k/

HTML

<div class="first">
    <p>
        CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1></h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.

Now that web fonts and SVG do much more of the heavy lifting for stylized text on the web, these techniques are falling out of use. But, we feel it's worth preserving them in this museum to celebrate the ingenuity that went into their creation, and to remind ourselves of a bygone era in web design.
        CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1></h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.

Now that web fonts and SVG do much more of the heavy lifting for stylized text on the web, these techniques are falling out of use. But, we feel it's worth preserving them in this museum to celebrate the ingenuity that went into their creation, and to remind ourselves of a bygone era in web design.
    </p>

</div>
<div class="second">
   Now that web fonts and SVG do much more of the heavy lifting for stylized text on the web, these techniques are falling out of use. But, we feel it's worth preserving them in this museum to celebrate the ingenuity that went into their creation, and to remind ourselves of a bygone era in web design.
</div>

CSS

.first{
    display:inline-block;
    vertical-align:top;
    width:100px;
    height:1000px;
    overflow-y:scroll !important;
}
.second{
    margin-left:100px;
    display:inline-block;
    vertical-align:top;
     width:100px;
    height:100px;
}
body{
overflow-y:hidden;
}

Upvotes: 4

Views: 2658

Answers (1)

Mr Lister
Mr Lister

Reputation: 46549

The bottom arrow is there, you just can't see it because it's outside of the window. The window itself (styled through the body) has overflow:hidden.

Solution: don't apply overflow:hidden to the body, apply it to the second div (at least if it, as I surmise, shouldn't have scrollbars).

I also needed to apply height to both the html and the body, to make sure they are as high as the window.

New fiddle: http://jsfiddle.net/nzguLb3k/1/

(Note that the "calc" for the height of the body is only necessary if you keep the margins; otherwise it can just be 100%.)

Upvotes: 5

Related Questions