Css Div在页面下方延伸太远

好的，问题是：

我有一个左侧菜单，它的大小与页面大小不符。如果内容不必滚动，则页脚应位于底部，菜单div应向下延伸以接触页脚。我试过粘脚的把戏，也就是所谓的“粘脚”把戏……但菜单上没有什么好运气

这是我的CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #999966 url(bgbottom.png);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: repeat-x;
}

a {
    color: #29211D;
}
h2 {

    font-size: 26px;
    font-weight: normal;
}

.head {

    background-image: url(bg.jpg);
    width: 100%;
    border-bottom: 4px solid #29211D;
    overflow: hidden;
    height: 185px;
}

.nav {

    background-color: #29211D;
    width: 150px;
    color: white;
    padding: 10px;
    height: auto !important;
    min-height: 100%;
    font-size: 14px;    
    float: left;
}

.content {

    font-size: 14px;
    width: 80%;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    height: auto !important;
    min-height: 70%;
    background-color: #FFF;
    border: 2px #666 solid;
    margin-left: 2%;
    margin-top: 1%;
}   

.footer {

    background-image: url(bg.jpg);
    border-top: #29211D solid 3px;
    border-bottom: #29211D solid 3px;
    text-align: center;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;

}

---

以下是网站：

如果我理解您的意图，您希望导航部分触及页脚底部吗？如果是这样，这是一个简单的改变：

将.nav类的最小高度属性从

min height:70%更改为：至<代码>最小高度：100%


Current.css:

@charset "utf-8";
/* CSS Document */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #999966 url(bgbottom.png);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: repeat-x;
}

a {
    color: #29211D;
}
h2 {

    font-size: 26px;
    font-weight: normal;
}

.head {

    background-image: url(bg.jpg);
    width: 100%;
    border-bottom: 4px solid #29211D;
    overflow: hidden;
    height: 185px;
}

.nav {

    background-color: #29211D;
    width: 150px;
    color: white;
    padding: 10px;
    height: auto !important;
    min-height: 73%;
    font-size: 14px;    
    float: left;
    overflow: auto;

}

.content {

    font-size: 14px;
    width: 80%;
    float: left;
    height: auto !important;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FFF;
    border: 2px #666 solid;
    margin-left: 2%;
    margin-top: 1%;
}   

.footer {

    background-color: #999966; /* Can probably be removed as you will have a background image */
    width: 100%;
    position: absolute;
    bottom: 0;
    background-image: url(bg.jpg);
    border-top: #29211D solid 3px;
    border-bottom: #29211D solid 3px;
    text-align: center;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    z-index: 100;   /* Since it is will need to overlay the background of the navigation behind it */
}

希望有帮助：）
事实上，我想知道使用-bannersizepx边距是否可以解决这个问题…？更新：这样做不起作用…我不明白你的问题是什么！70%应该是100%对不起。。正在编辑的代码复制了错误的代码！：）现在修好了抱歉是100%。但当我把100%放进去的时候，它已经超过了页面的底部（几乎像是横幅造成了这种情况。所以我试着做一个底部185px的边距，看看这是否能解决它。没有什么好处。：（谢谢。我会继续搜索：）-问题是当页面有垂直滚动条时，导航部分没有到达页脚吗？是的。在firefox atm中，菜单侧栏向下走得太远，导致滚动条在不必要时出现。但是如果内容确实滚动了那么远，我希望菜单条一直走到页脚。我想要它始终转到页脚。更新：它只执行我在firefox中描述的操作。在IE中看起来很好。我似乎没有注意到使用当前源的浏览器之间的差异（假设在此期间您正在更新问题中的站点）。