html - 为什么我看不到滚动条的底部

Question

滚动条底部有问题，我没有向下箭头。

我还添加了 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;
}

Answer 1

底部的箭头就在那里，你只是看不到它，因为它在窗口之外。窗口本身(通过主体设置样式)具有 overflow:hidden。

解决方案:不要将 overflow:hidden 应用到正文，而是将它应用到第二个 div(至少如果它，正如我推测的那样，不应该有滚动条)。

我还需要将 height 应用于 html 和正文，以确保它们与窗口一样高。

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

(请注意，只有在保留边距的情况下才需要“计算”主体的高度；否则它可能只是 100%。)