Как задать положение фиксированного блока в зависимости от размера другого?

Question

[unlik]

Имеется два фиксированных резиновых блока. Основное меню и подменю.

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

Comments

[Андрей Федоров]

дайте картинку и код на jsfidle или codepen

[Сергей delphinpro]

просто не надо делать блоки фиксированными. в большинстве случаев этого не требуется, однако, начинающие часто так делают.

[unlik]

Андрей Федоров: fivejournal.ru/bronirovanie Вот страничка

[unlik]

Сергей: Они постоянно вверху страницы должны быть

[Андрей Федоров]

до боли знакомая менюшка. )

[unlik]

Андрей Федоров: Ага. Всю ковыряю и пилю))

[Андрей Федоров]

Зачем вы сделали телефон похожим на пункт меню?

Answer 1

[Евгений Петров]

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

HTML

<div class="f1">
	<div class="f1-content"></div>
	<div class="f2">
		<div class="f2-content"></div>
	</div>
</div>

CSS

.f1,
.f2 {
	position: fixed;
	left: 0;
	right: 0;
}
.f1 {
	top: 0;
}
.f1-content {
	height: 100px; //может меняться в любой момент
	background: rgba(102, 153, 204, .7);
}
.f2-content {
	height: 100px;
	background: rgba(51, 102, 153, .7);
}

Пример (кликать на верхнем блоке)

Хотя не понимаю, зачем вам такой геморрой, если можно второй блок сделать обычным. Если оба блока лежат в фиксированном, то и управлять ими легче.

Comments

[unlik]

Спасибо. Получилось)

Answer 2

[Андрей Федоров]

Сделайте меню и подменю фиксированной высоты. И будет вам счастье.

Comments

[unlik]

Это слишком просто)) Количество пунктов меню может меняться. Править высоту каждый раз)

[Андрей Федоров]

А вам нужно сложно? )

[unlik]

Нужно чтобы это автоматически происходило)

[unlik]

Дело еще в том, что при изменении размера браузера высота первого блока меняется автоматически.

[Андрей Федоров]

тогда сожгите свой код и пишите заново. )

Серьезно. Разработка происходит от той информации, которую нужно дать увидеть пользователям. Рассуждайте так - у меня будет от 5 до 9 пунктов меню, я хочу расположить его горизонтально. При этом меню должно быть видно полностью при ширине от 320px...

Значит у вас уже появится ясность, что один пункт меню не может занимать более 320/9 ~ 35 пикселов. Так, но в такой размер ничего не влезет. Хорошо, тогда давайте на маленьких экранах разместим меню в два ряда, а на больших в один.

В общем тут надо подумать предварительно, а вы сразу клаву топтать. Ведь потом переделывать придеться. Хорошо если не в самом конце проекта...

Answer 3

[yoshidamana]

Заверните их в один див, который будет иметь position:fixed, а сами блоки header_bg и wrapper-menu-internal пусть лежат внутри него без фиксирования.

Comments

[unlik]

В таком случае фиксированным становится только header_bg

[Евгений Петров]

unlik: Оба будут расположены в фиксированном блоке. Зачем вам второй всенепременно фиксированный? Даже проще управлять одним блоком, а не двумя.

[yoshidamana]

Вам что-то такое надо? jsfiddle.net/yoshidamana/x0mxn48v/1

Answer 4

[SirMustache]

Можно через JS

$(window).on('resize', function(){
	$('.wrapper-menu-internal').css({
		'top': $('.header_bg').height() + 'px'
	})
})

Но лучше, как писали выше, обернуть в один блок.