Please help me get my content div to get auto height from absolutely positioned element

Question

I need help with CSS layout. It is configured as follows:

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

Thus, it is assumed that nav floats over the entire contents of the main page. That is why I am determined to be absolutely positioned. The problem is that nav elements are dynamic, with no height set. At the moment, the navigator is expanding the content. How can I fix this so that the content is set to automatic height based on navigation?

Thanks in advance.

Take a look at http://csslayout.commercev3.com/ to find out what I have. The problem is also that the floating left navigator and content div are dynamic. Thus, the content of the div should coincide with the left navigation minimum and expand for it its own content.

Answer 1

It looks like you might need to use jQuery, you can do something like this.

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

Here is a working violin and our compelling violin

I suggest this because I am currently implementing a similar solution. Otherwise, without javascript / jQuery, I'm pretty sure that it is not possible to determine the relationship of kinship to an absolutely positioned element using pure CSS.

Answer 2

, , , , ( ). , ?

Answer 3

div div, CSS ( , WC3 , , , , , . WC3...).

Answer 4

, position: absolute;. float: left html, div #content. Yu div #content.