Стиль элемента, основанного на атрибуте другого элемента

Question

У меня есть позиция: исправлена ​​ div, которая служит в качестве контейнера для верхнего меню. Я хочу, чтобы следующий div, который является контейнером для остальной части содержимого, размещался точно после фиксированного div, чтобы избежать скрытия содержимого под верхним div, но также избегать какого-то «пробела» между ними.

Основной обходной путь это установка фиксированного значение «Верхнее поле», но мне было интересно, если это возможно, чтобы установить контейнер содержимое «Верхнее поле» значение высоты неподвижной верхней DIV меню используя CSS, или предпочтительнее делать это с помощью JavaScript?

Вот простой пример макета:

<div id="divTopFixed" style="width: 100%; position: fixed; top: 0px;">Some DIVs<br>That create variable height</div> 
<div style="margin-top: 40px; width:100%;">CONTENTS<br>...</div> 

И JSFiddle: http://jsfiddle.net/zzcbajtz/

Answer 1

margin-top Установка для фиксированного значения, как правило, правильный путь идти об этом.

Если вы не уверены в высоте фиксированного верхнего меню или динамически изменяетесь в зависимости от содержимого, вы можете использовать события JavaScript/DOM для динамического изменения значения поля (например, если меню изменяет высоту при изменении размера в окне вы можете посмотреть событие resize и отрегулировать значение поля).

Я обновил JSFiddle, чтобы показать пример того, как подключиться к resize события и установить поле, запрашивая offsetHeight фиксированного элемента: http://jsfiddle.net/zzcbajtz/2/

window.addEventListener('resize', (function resize(){ 
    document.getElementById('the_div').style.marginTop = 
    document.getElementById('divTopFixed').offsetHeight + 'px'; 
    return resize; 
})()); 

Этот код срабатывает, когда документ а затем снова при каждом изменении размера окна.

CSS не может рассчитать сложные макеты, как это для вас, к сожалению. Там some better support for layouts coming in the future (но я думаю, что даже это не решает проблему, которую вы испытываете здесь).