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

Question

[New York Knicks]

Есть два разноцветных блока. Не понимаю как сделать, чтобы фон занимал 100% высоты пространства экрана независимо от содержимого. Задавать размер в пикселях не вариант.

Answer 1

[Therapyx]

смотря к какому елементу ты делаешь высоту 100%. Можно обвести их в 1 блок и сделать ему высоту в 1000px, тогда последующие блоки в нем с высотой в 100% будут работать иначе же, надо делать что-то вроде этого:

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
.content {
	width: 960px;
	min-height: 100%;
}

Comments

[New York Knicks]

При выставлении height: 100% и min-height: 100%; блок без контента всё равно не отображается, я также писал.

[New York Knicks]

Только в моем content ещё 2 блока

[Therapyx]

New York Knicks: А пробовал 100vh? Закинь ка код на https://jsfiddle.net/

[Therapyx]

New York Knicks: п.с. всегда делая такие вопросы, закидывай код туда, и кидай сюда ссылку) это так... совет.

[New York Knicks]

https://jsfiddle.net/fm08n85h/1/

[Therapyx]

New York Knicks: ну вот смотри, я правда убрал куски не нужного кода, чтоб глаза не мазолили, но 100vh - пашет https://jsfiddle.net/fm08n85h/20/

[Therapyx]

New York Knicks: задавай 100vh в left_side и right_side, в остальные блоки, которые находятся уже непосредственно "в них" ставить height:auto;

[New York Knicks]

Therapyx: отлично, спасибо :) А это хорошая практика, использовать такую единицу измерения? Никак не скажется на адаптивность?

[Therapyx]

New York Knicks: чесно скажу - не знаю точно) Просто оооооочень часто последние пол года вижу, что многие фронт-ендщики пишут так. Поэтому думаю как раз таки это и практикуется в респонсиве)

Answer 2

[Никита Борзенков]

.element {
    height: 100vh;
}