css - 请帮助我获取我的内容 div 以从绝对定位的元素获取自动高度

Question

我需要一些关于 CSS 布局的帮助。它是这样设置的:

+--------------------+
| |   |   header     |
|-|   |--------------|
| |nav|   content    |
| |   |              |
| |   |              |
| |   |              |
| footer             |
+--------------------+

因此，导航应该 float 在所有主页内容之上。这就是为什么我将它设置为绝对定位的原因。问题是导航项是动态的，没有设置高度。现在，导航扩展到内容之外。我该如何修复它，以便内容具有基于导航的自动高度？

提前致谢。

看看http://csslayout.commercev3.com/看看我到目前为止有什么。问题还在于 float 的左侧导航和内容 div 是动态的。因此，内容 div 至少需要与左侧导航相匹配，并为其自身的内容展开。

Answer 1

听起来你可能需要使用 jQuery，你可以这样做。

$(function(){
  var headerHeight = $('#header').height();
  var navHeight = $('#nav').height();
  var contentHeight = navHeight - headerHeight;
  $('#content').css('minHeight',contentHeight);
}) 

这是一个working fiddle和我们的 conclusive fiddle

我提出这个建议是因为我目前正在实现类似的解决方案。否则，如果没有 javascript/jQuery，我相当肯定无法使用纯 CSS 确定与绝对定位元素的兄弟关系。