CSS dropshadow不'；你够不到这一页的底部吗？

我想在我的主要内容的两面都使用dropshadow，但它没有到达页面的底部。它在结束前切断了大约100像素的电流。我还不知道为什么。非常感谢您的帮助

HTML文件： 样式表：

HTML

<div id="container">
    <div id="sidebar">
        <img name="logo" src="" width="280" height="150" alt="" />
        <br />
        <br />Babylon Citizens Council of the Arts is a not-for-profit arts organization bringing theatre, music, fine arts and cultural events to the residents of the Town of Babylon.
        <br />
        <br />
        <ul id="nav">
            <li><a href="about.html">About</a>
            </li>
            <li><a href="events.html">Events</a>
            </li>
            <li><a href="programs.html">Programs</a>
            </li>
            <li><a href="comp.html">Competitions</a>
            </li>
            <li><a href="photos.html">Photos</a>
            </li>
            <li><a href="membership.html">Membership</a>
            </li>
            <li><a href="contact.html">Contact</a>
            </li>
        </ul>
        <br />Follow us on social networks!
        <br />
        <br />
<a href="#"><img src="images/fb.png" /></a>  <a href="#"><img src="images/twitter.png" /></a>

    </div>
    <div class="content">
         <h3>Welcome to the Babylon Citizens Council on the Arts!</h3>

        <p><a href="#">link test</a>
        </p>
        <div id="slider">SLIDER WILL BE HERE</div>
        <!-- end .content -->
    </div>
    <!-- end .container -->
</div>

巴比伦公民艺术委员会是一个非营利的艺术组织，为巴比伦镇的居民提供戏剧、音乐、美术和文化活动。





















在社交网络上关注我们！




欢迎来到巴比伦公民艺术委员会！


滑块将在这里

CSS

@charset"UTF-8";
 html, body {
    height: 100%;
}
body {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    line-height: 22px;
    background: url(images/bg.png);
    margin: 0;
    padding: 0;
    color: #666;
}
/* ~~ Element/tag selectors ~~ */
 ul, ol, dl {
    /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px;
    /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img {
    /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
 a:link {
    color: #42413C;
    text-decoration: underline;
    /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
 #container {
    width: 960px;
    height: 100%;
    background: #FFF;
    display: block;
    margin: 0 auto;
    /* the auto value on the sides, coupled with the width, centers the layout */
    -moz-box-shadow: 10px 0 5px -10px #cab7aa, -10px 0 5px -10px #cab7aa;
    -webkit-box-shadow: 10px 0 5px -10px #cab7aa, -10px 0 5px -10px #cab7aa;
    box-shadow: 10px 0 10px -10px #cab7aa, -10px 0 10px -10px #cab7aa;
    /* For IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cab7aa')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cab7aa');
}
/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
 #sidebar {
    width: 280px;
    height: 100%;
    float: left;
    background-color: #f5e9e0;
    padding: 40px;
}
#nav {
    list-style-type: none;
    line-height: 32px;
}
#nav a, #nav a:link, #nav a:visited, #nav a:active {
    text-decoration: none;
    border-bottom: 1px dotted #784e33;
    display: block;
}
#nav a:hover {
    text-decoration: none;
    border-bottom: 1px dotted #784e33;
    background-color: #fcf5f0;
}
.content {
    width: 560px;
    height: 100%;
    float: right;
    background-color: #FFF;
    padding: 40px 20px 40px 20px;
}
/* ~~ miscellaneous float/clear classes ~~ */
 .fltrt {
    /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft {
    /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
}
.clearfloat {
    /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

@charset“UTF-8”；
html，正文{
身高：100%；
}
身体{
字体：12px Verdana，Arial，Helvetica，无衬线；
线高：22px；
背景：url（images/bg.png）；
保证金：0；
填充：0；
颜色：#666；
}
/*~~元素/标记选择器~~*/
ul，ol，dl{
/*由于浏览器之间的差异，最好的做法是将列表上的填充和边距设置为零。为了保持一致性，您可以在此处指定所需的数量，也可以在它们包含的列表项（LI、DT、DD）上指定。请记住，除非您编写了更具体的选择器，否则您在此处执行的操作将级联到.nav列表*/
填充：0；
保证金：0；
}
h1，h2，h3，h4，h5，h6，p{
边际上限：0；
/*删除上页边距可以避免页边距可以从其包含的div中溢出的问题。剩余的下页边距将使其远离后面的任何元素*/
右侧填充：15px；
左侧填充：15px；
/*将填充添加到div中元素的侧面，而不是div本身，可以消除任何框模型数学。带有侧面填充的嵌套div也可以用作替代方法*/
}
img{
/*当图像被链接包围时，此选择器将删除某些浏览器中显示的图像周围的默认蓝色边框*/
边界：无；
}
/*~~站点链接的样式必须保持此顺序-包括创建悬停效果的选择器组。~~*/
a:链接{
颜色：#42413C；
文字装饰：下划线；
/*除非您将链接的样式设置为非常独特，否则最好提供下划线，以便快速进行视觉识别*/
}
a:参观了{
颜色：#6E6C64；
文字装饰：下划线；
}
a:悬停，a:活动，a:聚焦{
/*这组选择器将为键盘导航器提供与使用鼠标的人相同的悬停体验*/
文字装饰：无；
}
/*~~这个固定宽度的容器包围了所有其他元素~~*/
#容器{
宽度：960px；
身高：100%；
背景：#FFF；
显示：块；
保证金：0自动；
/*侧面的“自动”值与宽度一起使布局居中*/
-moz盒阴影：10px05px-10px#cab7aa，-10px05px-10px#cab7aa；
-网络工具包盒阴影：10px05px-10px#cab7aa，-10px05px-10px#cab7aa；
盒影：10px 0 10px-10px#cab7aa，-10px 0 10px-10px#cab7aa；
/*对于IE 8*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#cab7aa'）”；
/*对于IE 5.5-7*/
过滤器：progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#cab7aa'）；
}
/*~~这是布局信息。~~
1） 填充仅放置在div的顶部和/或底部。此div中的元素在其侧面具有填充。这可以避免任何“盒子模型数学”。请记住，如果向div本身添加任何边距或边框，它将添加到定义的宽度中，以创建*总*宽度。您也可以选择删除div中元素上的填充，并在其中放置第二个div，该div没有设计所需的宽度和填充。
*/
#边栏{
宽度：280px；
身高：100%；
浮动：左；
背景色：#f5e9e0；
填充：40px；
}
#导航{
列表样式类型：无；
线高：32px；
}
#导航a，#导航a:链接，#导航a:已访问，#导航a:活动{
文字装饰：无；
边框底部：1px点#784e33；
显示：块；
}
#导航a：悬停{
文字装饰：无；
边框底部：1px点#784e33；
背景色：#fcf5f0；
}
.内容{
宽度：560px；
身高：100%；
浮动：对；
背景色：#FFF；
填充：40px 20px 40px 20px；
}
/*~~其他浮动/清除类~~*/
外研社{
/*此类可用于在页面中浮动元素。浮动元素必须位于页面上它应该位于旁边的元素之前*/
浮动：对；
左边距：8px；
}
.fltlft{
/*此类可用于浮动页面中剩余的元素。浮动的元素必须位于页面上它应该位于旁边的元素之前*/
浮动：左；
右边距：8px；
}
.clearfloat{
/*如果移除了.container上的overflow:hidden，则此类可以放置在
或空div上，作为最后一个浮动div（在#container内）后面的最后一个元素*/
明确：两者皆有；
身高：0；
字号：1px；
线高：0px；
}

您需要移除

主体

和

html

高度（100%仅使用浏览器高度），并在关闭

容器之前放置一个空白div

清算部门：

请看这里：

感谢@Allendar制作了原始的JSFIDLE
 请尝试添加您的代码到小提琴在我已经提出了一个；谢谢，伙计们，很抱歉拉小提琴！很好。使用额外的标记来清除浮动是如此的耗时10年