Форум

Tanya51 · #1 (**permalink**) 22.09.2017, 11:17

Такой вопрос:
У меня есть в верстке абсолютно позиционированный блок(слайдер), за ним идет следующий блок (main), обычное позиционирование. Мне надо чтоб блок main отступал сверху на высоту блока слайдера + высота верхнего меню (110px).

Есть такой код:

'use strict'
var heightImg = $('#carousel-img').height();
//console.log( heightImg);
var heightTop = heightImg + 110;
$('main').offset({top:heightTop});

Блок main отступает на высоту блока слайдера,что надо. Но мне надо, чтоб это происходило динамически. Т.е. при изменении ширины экрана менялся и отступ.
У слайдера высота не фиксированная.Высота слайдера зависит от высоты картинки(тег img).

Помогите пожалуйста, я не знаю как сделать можно.

ksa · #2 (**permalink**) 22.09.2017, 13:48

Сообщение от Tanya51

я не знаю как сделать можно

Например не использовать абсолютное позиционирование... Пусть эти два элемента будут в одном потоке - тогда один будет влиять на другой...

j0hnik · #3 (**permalink**) 22.09.2017, 14:02

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.slider{
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}
		img{
			display: block;
			position: relative;
			width: 100%;
		}
		.main{
			margin-top: 110px;
			height: 100px;
			background-color: blue;
			color: white;
		}
		.hid{
			visibility: hidden;
		}
		.wrap{
			position: relative;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="slider"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="main">main</div>
</div>
</body>
</html>

Вот вам решение без JS

j0hnik · #4 (**permalink**) 22.09.2017, 14:14

меню приделал для наглядности

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		font-size: 30px;
	}
	.slider{
		margin-top: 110px;
		top: 0;
		left: 0;
		position: absolute;
		width: 50%;
	}
		img{
			display: block;
			position: relative;
			width: 100%;
		}
		.main{
			height: 100px;
			background-color: blue;
			color: white;
		}
		.hid{
			width: 50%;
			visibility: hidden;
		}
		.wrap{
			position: relative;
		}
		.menu{
			background-color: green;
			height: 110px;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="menu">Меню</div>
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="slider"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="hid"><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
	<div class="main">main</div>
</div>
</body>
</html>

Dilettante_Pro · #5 (**permalink**) 22.09.2017, 14:18

Еще можно

display:flex;
flex-direction:column;

Tanya51 · #6 (**permalink**) 22.09.2017, 18:00

спасибо всем.
Буду разбираться.
А про flex я чего-то даже и не вспомнила))

Форум

Справочник

Discord чат

Курсы javascript