Question

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

我还添加了overflow-y：scroll！important;

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和正文，以确保它们与窗口一样高。

新小提琴：http://jsfiddle.net/nzguLb3k/1/

（注意，只有保持边距才需要身体高度的“计算”;否则它只能是100％。）

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

1 个答案: