2015-11-03 78 views
2

我有滾動條底部的問題,我沒有向下的箭頭。爲什麼我看不到滾動條的底部

另外我加了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; 
} 
+0

是的,我婉不要爲身體隱藏溢出,並且只在我的div上應用滾動條,稱爲「第一」 – ml92

回答

2

底部箭頭是存在的,你就不能看到它,因爲它是在窗口之外。窗戶本身(通過身體造型)有overflow:hidden

解決方案:不要將overflow:hidden應用於身體,將其應用於第二個div(至少如果它,因爲我猜測,不應該有滾動條)。

我還需要將height應用於html和body,以確保它們與窗口一樣高。

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

(請注意,「計算」爲體的高度只有必要的,如果你保持利潤率;否則,可以僅僅是100%。)

+0

謝謝你,那就是它! – ml92