Есть ли способ, чтобы один абсолютный div не наезжал на другой при изменении размера вьюпорта?

Question

На картинке то как хотелось бы

.top, .middle, .bottom {
	width: 300px;
	height: 200px;
	position: absolute;
}
.top {
	background: lime;
	top: 0;
}
.middle {
	background: cyan;
	top: 50%;
	transform: translate(0, -50%)
}
.bottom {
	background: orange;
	bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Layout Test</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="top"><h1>Top</h1></div>
	<div class="middle"><h1>Middle</h1></div>
	<div class="bottom"><h1>Bottom</h1></div>
</body>
</html>

Answer 1

Решено! Спасибо флексу

.container {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	height: 100vh;
}
.top {
	background: lime;
}
.middle {
	background: cyan;
}
.bottom{
	background: orange;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Layout Test</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="top"><h1>Top<br>Some more text</h1></div>
		<div class="middle"><h1>Middle<br>Some more text</h1></div>
		<div class="bottom"><h1>Bottom<br>Some more text</h1></div>
	</div>
</body>
</html>

БЛОГ НА HUSL

Есть ли способ, чтобы один абсолютный div не наезжал на другой при изменении размера вьюпорта?

Ответы (1 шт):