Question

我已经尝试了Stack Overflow上有很多关于如何让我的导航扩展到我的内容底部的建议。这些建议似乎都不适合我。

现在，我将html和body设置为height: 100%;，但这不起作用。

有人可以提供一些建议吗？

http://jsfiddle.net/8XsAY/

基本上，我只希望左右导航栏扩展到内容div的大小。 div#leftNav.height = div#content.height

我知道可以使用JavaScript，但如果可能的话，我想避免使用它。

谢谢！

更新

感谢大家的回复。我一直无法工作，很可能是由于我自己无法使用CSS进行设计。因此，我使用JavaScript来解决问题。

使用JQuery：

$(window).load(function() {
    navHeightAdjust();
});

$(window).resize(function() {
    navHeightAdjust();
});

function navHeightAdjust() {
    var contentHeight = $("div#content").height();
    var leftNavHeight = $("div#leftNav").height();
    var rightNavHeight = $("div#rightNav").height();

    var newHeight = Math.max(contentHeight, leftNavHeight, rightNavHeight);

    $("div.nav").height(newHeight);
};

Answer 1

尝试将#content height 100％旁注：你的页脚在最后清除浮动，因此你的左右导航不会触及页面底部。如果你需要调试，你也可以在#content上设置border：1px solid red来检查

希望它有所帮助！

Answer 2

我不确定天气是否会避免硬编码你的身高但是如果你改变身高：100％到身高：1650px它会起作用。

div.nav {
    border-style: solid;
    border-top-width: 0px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    background-color: #B2A58A;
    width: 10%;
    padding: 0.5%;
    height: 1650px;
}

我还添加了背景颜色：黑色仅用于演示目的。你可以随时删除它。

div#footer {
    clear: both;
    text-align: center;
    color: #B2A48A;
    font-weight: bold;
    background-color:black /* to test */
}

Answer 3

在overflow:hidden内添加div#main 并添加

margin-bottom: -1000px;
padding-bottom: 1000px;

在div.nav内，它会像魔术一样工作

JSFIDDLE DEMO

CSS将导航扩展到内容长度

3 个答案: