Почему фон не доходит до конца контента?

Question

[hrvasiliy]

Почему фон не доходит до конца контента? Все никак не могу разобраться. Прикладываю код: jsfiddle.net/1898d5wz

Answer 1

[Александр Миранович]

Потому что у него высота указана 100%, а это является в данном случае высота окна браузера
jsfiddle.net/1898d5wz/11

Comments

[hrvasiliy]

Стоило добавить в вопрос, что это очевидно.

[Александр Миранович]

Ну так если очевидно зачем тогда спрашивать, почитай про позиционирование элементов на странице, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

[hrvasiliy]

Александр Миранович: Вопрос про высоту фона, а не про позиционирование элементов

[Дима nahkar]

Александр Миранович: С fixed не соглашусь всеравно отсчет будет от окна браузера left-top

[Александр Миранович]

Дмитри, ты не прав, если у родителя стоит fixed, я в нем прописываю другой элемент с позиционированием, то он уже позиционируется от края родителя.

Answer 2

[Михаил Горячкин]

Потому-что у вас right_block c position absolute и у внутренних блоках float: left. Надо так:

<div class="wrapper">
			<div class="left_block">
				
			</div>
			<div class="right_block">
				<main>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
					<section class="box">
						<h1>TEXT</h1>
					</section>
				    <div class="clear"></div>
                </main>
			</div>
		</div>

CSS:

html, body{
	height: 100%;
	width: 100%;
    padding: 0;
    margin: 0;
}

.wrapper{
	min-height: 100%;
	width: 100%;
    background: grey;
}

.left_block{
	width: 250px;
	height: 100%;
	float: left;
}

.right_block{
	width: auto !important;
	min-height: 100%;
	background: gold;
	margin-left: 250px;
}

.box{
	width: 220px;
	height: 170px;
	float: left;
	margin: 10px;
	background-color: silver;
	padding: 15px;

}

.clear {
     clear: both;   
}

Comments

[hrvasiliy]

Да, все замечательно с правым блоком, только вот левый там же и остался

[Михаил Горячкин]

Тогда так, код поправил.

[hrvasiliy]

Михаил Горячкин: Да, выглядит неплохо. Только вот как такого левого блока вообще нет: jsfiddle.net/owsvx6ze

[Михаил Горячкин]

Если вы будете писать текст сплошной строкой, то у вас любой блок так себя вести будет, так как по дефолту запрещено разбитие одного слова и перенос на другую строку. можете добавить к левому блоку свойство word-break: break-all и убедится.

[hrvasiliy]

Михаил Горячкин: Добавьте border или outline - его просто не будет! Так как по сути левого блока не существует, есть только фон и отступ от левого края.

[Михаил Горячкин]

Это просто имба. Как только отступ вы что код вообще не смотрите.
.left_block{
width: 250px;
height: 100%;
float: left;
word-break: break-all;
}
Что ширину не видно? Блок есть настоящее некуда, тянуться будет по высоте контента, что вам еще надо?

[hrvasiliy]

Михаил Горячкин: Почему вы указываете тот же background враперу, а не левому блоку?

[Михаил Горячкин]

Это делается для того чтобы создать видимость что левый блок тянется, на самом деле его высота выставляется по контенту. В результате мы получаем, что если в левой колонке контента больше чем в правом, то визуально фоны левой и правой колонки будут всегда одинаковы и наоборот. Вариант где обе колонки тянутся физически до конца страницы невозможен без использования либо js, либо flexbox, либо без смены верстки.

Answer 3

[Максим]

.right_block{
position: absolute;
background: gold;
margin-left: 250px;
}

Comments

[hrvasiliy]

Да, все замечательно с правым блоком, только вот левый там же и остался