具有动态高度的绝对定位 div答案

【问题标题】：Absolute positioned div with dynamic height具有动态高度的绝对定位 div
【发布时间】：2015-05-16 11:55:58
【问题描述】：

我有一个基于 Foundation 5 和 angularjs 的网站，布局如下：

header
-left-nav
--content
footer

目前左侧导航绝对定位在左侧，初始高度为 100%（顶部：0，底部：0）

内容 div 的高度会随着加载到其中的内容而变化（通过 ajax）。当内容高度发生变化时，我正在手动调整左导航 div 的高度，但我想知道是否有一种使用 html/css 的方法可以让我摆脱这个脚本。

我已经尝试使用通过谷歌搜索找到的所有技术，但如果没有 javascript，似乎都无法工作。我需要左侧导航始终为页面高度的 100%，因为它有一个可以延伸的深色背景到页面底部。

非常感谢，本

【问题讨论】：

你能创建一个jsfiddle.net
这里是：jsfiddle.net/vn2wdbpm/1 - 抱歉，样式表太大，无法弄清楚如何创建文件并引用它，您可以检查 div 以查看应用的样式。跨度>
更新了小提琴。但不确定它是否会以更大的尺寸缩放，试试看，如果没有，用 chrome 检查元素并找出 div 使用的是哪个 css。

标签： css

【解决方案1】：

更新

它在这个jsfiddle.net工作

这个FIDDLE 有一个“添加内容”按钮，可以显示它处理动态数据。

我刚刚改了这个...

 .small-fixed-130-left.column {
        position:absolute;
        width:11.4285714286rem;
        top:0;
        left:0;
            bottom: 0;
    }

【讨论】：

当内容通过 ajax 添加到主要内容 div 时，我很确定高度与原来保持一致
我在小提琴中为你测试过，通过动态添加内容，它可以工作。 jsfiddle.net/incept0/vn2wdbpm/3自己看
@BenKilah 发布了一个更新的小提琴，显示它正在工作
非常感谢您的回复，我非常感谢，虽然这在您的小提琴中有效，但它确实完成了我所追求的，检查我原帖的倒数第二句，需要 100 % 页面高度，和主要内容 div 高度不一样，干杯
所以你想让它越过页脚？ @BenKilah 那么要覆盖的整个高度吗？

【解决方案2】：

你可以定位：固定；左侧导航高度：100%；

【讨论】：