Html CSS将导航扩展到内容长度

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

现在，我将

html

和

body

设置为

height:100%但这不起作用

有人能提供一些建议吗


基本上，我只希望左侧和右侧导航栏扩展到content 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);
};

试着把#内容高度100%放在侧边注：你的页脚在末尾，因此你的左右导航不会接触到页面底部。如果您需要调试，还可以在内容上加上边框：1px实心红色以进行检查

希望有帮助
 我不确定您是否在避免硬编码身高，但如果您将身高：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 */
}

添加
overflow:hidden
inside
div#main
加

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

内部
div.nav
它将像魔术一样工作

简单添加
高度：100%到#内容不起作用。我刚才在小提琴上试过，除了页脚与文本重叠外，没有任何变化。我不太关心页脚；我可以稍后再解决。嗯，你可能想在本页的“这里有5种不同的方式”部分检查这个。是的，我正在努力避免硬编码高度。我希望它能够扩展到内容长度。我可以通过硬编码很容易地让它工作，但我更喜欢可伸缩性。更不用说，如果你调整页面大小，你会看到最终文本也会溢出1650px。这对我来说似乎不起作用。Chrome 32和IE 9都有。它在JSFIDLE上工作吗？啊，这似乎不是一个独立于浏览器的解决方案。。也可能是结构问题，我会重新设计和检查。