html - 有没有办法让 box-shadow 到页面底部？

Question

我想让我的图像 #afb1 的阴影到达页面底部，而阴影和页面底部之间没有空白页。这可能吗？

就像当我将#afb1 的高度更改为 500px 时它会变高，但我希望它连接到页面底部

html:

<div id="pics">

        <div id="afb1">
            <img src="Images/Chingy.png" alt="mooiboy" height="200" width="200"                                onmouseover="this.src='Images/chingy.jpg'" onmouseout="this.src='Images/Chingy.png'">
        </div>
</div>

CSS:

#pics{
margin: 0 auto;
text-align: center;
width:880px;
height:100%;
}

#pics img{
    border-radius: 100px;
}

#afb1{
    float:left;
    height:100%;
    box-shadow: 2px 0px 21px 0px rgba(50, 50, 50, 0.35);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    margin-right: 20px;
}

http://jsfiddle.net/7fA78/

Answer 1

它是页面的 100%。问题是您的页面不是窗口的 100%。添加这个

body,html{
    margin: 0;
    padding:0;
    height: 100%;
}