Пожалуйста, помогите мне получить мой контент div, чтобы получить авто высоту от абсолютно позиционированного элемента

Question

Мне нужна помощь с макетом CSS.Он настроен так:

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

Итак, навигация должна быть выше всего содержимого главной страницы.Вот почему я настроен на абсолютную позицию.Проблема в том, что элементы навигации являются динамическими, без установленной высоты.Прямо сейчас навигация расширяется мимо содержания.Как я могу это исправить, чтобы у контента была автоматическая высота на основе навигации?

Заранее спасибо.

Взгляните на http://csslayout.commercev3.com/, чтобы увидеть, что у менядо сих пор.Проблема также в том, что плавающая левая навигация и содержимое div являются динамическими.Таким образом, div контента должен соответствовать как минимум левой навигационной панели и расширяться для собственного контента.

Answer 1

Похоже, вам может понадобиться использовать jQuery, вы можете сделать что-то вроде этого.

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

Вот рабочая скрипка и наша окончательная скрипка

Я предлагаю это, потому что в настоящее время я внедряю подобное решение.В противном случае, без javascript / jQuery, я вполне уверен, что невозможно определить родственное отношение к абсолютно позиционированному элементу, используя чистый CSS.

Answer 2

Судя по вашему примеру страницы, кажется, что вам не нужен position: absolute;. Установите поле навигации на float: left и измените HTML таким образом, чтобы оно было внутри #content div. Ю, возможно, потребуется убрать явную высоту #content div.

Answer 3

Вам нужно сделать плавающий div относительно вашего навигационного div, так как вы не можете использовать переменные в CSS (еще одна причина, почему WC3 отстой, они никогда не дают нам то, что мы хотим, они только говорят нам, что нам нужно, и они всегда неправильно. Я так тебя ненавижу WC3 ...).

Answer 4

Если у вас есть явная высота, установленная в навигационном меню, уберите ее, и все должно быть хорошо ( работает в этой скрипке ).Если нет, не могли бы вы вставить код?