LINUX.ORG.RU

Резиновый div

 , ,


0

1

Нужно что бы <div id=«test2»> растягивался на всю длину, в зависимости от количества <div id=«test4»> в <div id=«test3»>. Как это сделать? Пока получается так.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="test1">
	<div id="test2">
	<div id="test3">
	<div id="test4">
		<p id="test5">Съешь ещё этих мягких французских булок, да выпей чаю.</p>
	</div>
	</div>
	</div>
</body>
</html>

CSS

#test1 {
	width: 100%;
	height: 100%;
	min-height: 640px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	border-right: 0px;
	position: absolute;
}

#test2 {
	background-color: #FF6347;
	position: absolute;
	width: 100%;
	height: 100%;
}

#test3 {
	width: 98%;
	max-width: 1000px;
	height: 100%;
	position: absolute;
	left: 17%;
}

#test4 {
	width: 98%;
	position: static;
	max-width: 1000px;
	padding: 10px;
	left: 17%;
	background-color: #FFFFFF;
	margin-bottom: 15px;
}

#test5 {
	font-size: 120%;
	padding: 1px;
}

в зависимости от количества <div id=«test4»> в <div id=«test3»>.

Там может быть только один див с ид=тест4, ну если следовать спеке хтмл.

растягивался на всю длину

Длина это высота или ширина? Всю длину чего?

ya-betmen ★★★★★ ()
Последнее исправление: ya-betmen (всего исправлений: 1)
Ответ на: комментарий от ya-betmen

Там может быть только один див с ид=тест4, ну если следовать спеке хтмл.

Я только один <div id=«test4»> написал для примера. На скриншоте их побольше и более понятнее.

Riniko ()
Ответ на: комментарий от ya-betmen

Длина это высота или ширина? Всю длину чего?

Высота. Этих <div id=«test4»> там на 2 страницы, по высоте. Если брать высоту одной страницы в 1080. Нужно что бы <div id=«test2»> который оранжевый, что бы залит был по краю либо чуть ниже самого нижнего <div id=«test4»>. Резиновый так сказать. Можно конечно задавать фиксированную высоту оранжевого, но наверняка же можно его сделать резиновым.

Riniko ()

Всё крайне коряво и неграмотно... Изучи хорошую книгу по CSS сперва... И открой для себя flexbox с grid, настоящее и будущее вёрстки, с ними подобные вещи делаются в пару строк.. И да, id уникален, он может быть только у одного элемента на странице, используй class вместо него...

Вот, правка на быструю руку...

#test1 {
	width: 100%;
	height: auto;
	min-height: 640px;
	margin: 0;
	padding: 15px 0;
	background-color: #FF6347;
}

#test2 {
	width: 100%;
	height: inherit;
}

#test3 {
	width: 98%;
	max-width: 1000px;
	height: inherit;
	left: 17%;
	margin: 0 auto;
}

#test4 {
	width: 98%;
	position: static;
	max-width: 1000px;
	padding: 10px;
	left: 17%;
	background-color: #FFFFFF;
	
}

#test4:not(:last-child) {
	margin-bottom: 15px;
}

#test5 {
	font-size: 120%;
	padding: 1px;
}

enso ★★★★ ()
Последнее исправление: enso (всего исправлений: 1)
Ответ на: комментарий от enso

И да, id уникален, он может быть только у одного элемента на странице, используй class вместо него

Судя по тому что делаю (пишу несколько одинаковых id), они корректно отображаются. В чём принципиальная разница между Id и class? Гуглил, но на практике использование одинаковых id в рамках одной страницы не ломает вёрстку. Или я чего-то не знаю?

Riniko ()
Ответ на: комментарий от Riniko

Это просто современные браузеры игнорируют подобные ошибки. Но эта практика в корне неверна. id должны быть уникальны и используются, например как якоря для ссылок на длинном лендинге.

enso ★★★★ ()