CSS 将导航扩展到内容长度答案

【问题标题】：CSS To Extend Navigation To Content LengthCSS 将导航扩展到内容长度
【发布时间】：2014-03-26 15:23:58
【问题描述】：

我尝试了 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);
};

【问题讨论】：

标签： html css navigation

【解决方案1】：

尝试将#content height 100% 旁注：您的页脚位于最后清除浮动，因此您的左右导航不会触及页面底部。如果您需要调试，您还可以在#content 上放置border:1px 纯红色来检查

希望对你有帮助！

【讨论】：

简单地将height: 100%; 添加到#content 没有奏效。我刚刚在小提琴中尝试过它并没有改变任何东西，除了页脚与文本重叠。我不太关心页脚；我可以稍后解决。
嗯，您可以在此页面中查看somacss.com/fullheight.html，查找“这里有 5 种不同的方式”部分

【解决方案2】：

我不确定你是否避免对你的身高进行硬编码，但如果你将 height:100% 更改为 height: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;
}

我还添加了 background-color:black 仅用于演示目的。您可以随时删除它。

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

【讨论】：

是的，我试图避免对高度进行硬编码。我希望它扩展到内容长度。我可以通过硬编码轻松地让它工作，但我更喜欢可扩展性。更何况，如果你调整页面大小，你会看到最终文本也会溢出 1650 像素。

【解决方案3】：

更新：新
您现在可以使用Grid Layout 使所有相邻列的高度相同。您可以在容器 CSS 中使用 display:grid; grid-auto-rows: 1fr; 之类的东西。所有子 div 都将匹配最高同级 div 的高度。
请参考这个例子更好地理解 --> https://codepen.io/Hlsg/pen/EXKJba

--旧--
在div#main 中添加overflow:hidden 并添加

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

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

JSFIDDLE DEMO

【讨论】：

这似乎对我不起作用。 Chrome 32 和 IE 9 都是。它适用于您的 JSFiddle 吗？
啊，这似乎不是一个独立于浏览器的解决方案..也可能是我将设计新的结构问题并检查。