@unlik

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

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

При уменьшении размера окна браузера увеличивается высота первого блока и соответственно наезжает на второй.
Как сделать чтобы положение второго фиксированного блока изменялось в зависимости от высоты первого?
  • Вопрос задан
  • 356 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
По умолчанию свойства позиционирования равны 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);
}

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

Хотя не понимаю, зачем вам такой геморрой, если можно второй блок сделать обычным. Если оба блока лежат в фиксированном, то и управлять ими легче.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
aliencash
@aliencash
Партизан
Сделайте меню и подменю фиксированной высоты. И будет вам счастье.
Ответ написан
yoshidamana
@yoshidamana
Заверните их в один див, который будет иметь position:fixed, а сами блоки header_bg и wrapper-menu-internal пусть лежат внутри него без фиксирования.
Ответ написан
@SirMustache
Можно через JS

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


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

Войдите, чтобы написать ответ

Похожие вопросы
22 нояб. 2024, в 00:55
500 руб./за проект
21 нояб. 2024, в 23:30
300000 руб./за проект
21 нояб. 2024, в 22:21
3000 руб./в час