请帮助我获得我的内容div，从绝对定位的元素获得自动高度 [英] Please help me get my content div to get an auto height from absolutely positioned element

问题描述

我需要一些CSS布局的帮助。它的设置如下：

I need some help with a CSS layout. It is set up like this:

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

导航应该浮动在所有的主页内容之上。这就是为什么我把它设置为绝对定位。问题是nav项目是动态的，没有设置的高度。现在，导航展开了内容。如何解决此问题，以便内容将具有基于导航的自动高度？

So, the nav is supposed to be floating above all the main page content. That's why I have it set to be absolutely positioned. The issue is that the nav items are dynamic, without a set height. Right now, the nav expands past the content. How can I fix it so that the content will have an auto height based off the nav?

提前感谢。

查看 http://csslayout.commercev3.com/ ，看看我到目前为止。问题是浮动左侧导航和内容div是动态的。因此，内容div需要至少与左侧导航相匹配，并且为自己的内容也可以展开。

Take a look at http://csslayout.commercev3.com/ to see what I have so far. The issue is also that the floating left nav and the content div are dynamic. So, the content div needs to match the left nav at minimum and expand for it's own content too.

推荐答案

需要使用jQuery，可以这样做。

Sounds like you might need to use jQuery, you could do something like this.

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

工作小提琴和我们的结论性小提琴

我建议这样做，因为我目前正在实施类似的解决方案。否则没有javascript / jQuery，我是相当积极的是不可能使用纯CSS确定绝对定位元素的兄弟关系。

I suggest this because I am presently implementing a similar solution. Otherwise without javascript/jQuery, I am fairly positive it is not possible to determine sibling relationship to an absolutely positioned element using pure CSS.

这篇关于请帮助我获得我的内容div，从绝对定位的元素获得自动高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！