DIV на всю высоту родителя?

Question

[Lici]

Неужели по сей день нет человеческого решения этого вопроса? Страница в несколько экранов, нужно два блока на всю высоту. height:100% дает высоту экрана устройства, а не родителя. Не таблицами же теперь верстать из-за этого..

Answer 1

[Юрий Лобанов]

.parent {
  position: relative;
}
.child {
  position: absolute; 
  left:0;
  right:0;
  top:0;
  bottom:0;
}

Comments

[Lici]

Но это же костыль. Потом всем остальным блокам давать mardin, чтоб они выползли из под этого элемента. Неужели в CSS нет человеческого решения для этого?

[Lici]

margin*

[Юрий Лобанов]

@Lici из-под какого из них?

[Юрий Лобанов]

@Lici скажите, что с этим вопросом? Box-Shadow только с одной стороны — как?

[Lici]

@iiil там все ок, спасибо. просто это 2 части по сути одного вопроса - нужна тень от сайдбара в сторону мейнконтента и для этого сайдбар нужно сделать 100% по высоте.

[Юрий Лобанов]

@Lici сайдбар слева и выше, чем высота видимой части, я так понял?

[Юрий Лобанов]

@Lici i.imgur.com/Vm16Xa7.png
так?

[Lici]

Слева сайдбар, справа мейнконтент. Оба флоат лефт. Если сайдбар сделать абсолютом, то мейнконтент проваливается под него влево. Нужно делать margin-left: 300px. Решение, да, но костыльноватове)

[Lici]

@iiil сделал в итоге блок высотой в 100% вашим меодом и шириной в 1px и от него кинул тень.

Answer 2

[Евгений Веденин]

На самом деле свойство height, указанное в %, работает только если для внешнего блока указана высота. Либо для элементов с абсолютным позиционированием. В этом случае нужно указать top 0 и left 0

Answer 3

[Сергей Протько]

flex-box
css-tricks.com/boxes-fill-height-dont-squish

Answer 4

[vitya_yanyk]

Адаптивная высота
html:

<div class = "fullpage">
     <div id = "screen_1">
     </div>

     <div id = "screen_2">
    </div>
</div>

css:

.fullpage {
	position: relative;
	margin: 0px;
	padding: 0px;
	max-width: 100%;
	min-height: 200%;
	max-height: 200%;
	overflow: hidden;
}
#screen_1, #screen_2 {
	position: absolute;
	left: 0px;

	width: 100%;
	height: 50%;

	margin: 0px;
	padding: 0px;
}
	#screen_1 {
		top: 0px;
	}
	#screen_2 {
		top: 50%;
	}

fullpage - родительский блок с высотой в 2 экрана (200%), который содержит в себе 2 дочерних блока с высотой по 1 экрану каждый (50% от fullpage). У первого top: 0px и высота 50%, у второго top: 50% (т.к. он идёт встык после первого блока). Таким образом, мы можем задать n-е кол-во блоков-экранов с высотой (100% / n) и точкой top для каждого
for (i = 0; i < n; i++) {
top[i] = (100% / n) * i;
}
:)))

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

.fullpage {
     height: 100vh;      /*--- 100% от высоты видимой области страницы в браузере ---*/
     width: 100vw;     /*--- 100% от ширины ---*/
}

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая :(

Answer 5

[Мария Шкуринская]

Попробуй задать странице display: flex, а дочерним блокам align-self: stretch (+ flex-shrink: 0, если не нужно сжатия блоков) и не забудь, чтобы у дочерних элементов была указана ширина. Для меня такой способ сработал

Comments

[ilyshaChann]

Лучший способ, помогло)

Answer 6

[Power]

Вообще-то, div { height: 100%; } даёт как раз высоту родителя. А вот почему у вас высота родителя равна высоте экрана устройства, это уже другой вопрос.

Comments

[Lici]

макбук про, сафари. если что.

Answer 7

[malohacker]

javascript-ом получай высоту родителя и устанавливай её дочернему элементу

Answer 8

[d_n_nikitin]

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

.fullpage {
     height: 100vh;      /*--- 100% от высоты видимой области страницы в браузере ---*/
     width: 100vw;     /*--- 100% от ширины ---*/
}

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая :(

Это реально очень крутая штука! Как узнать в каких браузерах не работает?)

Comments

[Сергей Артёмов]

Так же как и почти всё: caniuse.com/#search=vh

Answer 9

[Борис Черепанов]

Для управления блоками я сделал библиотечку. Мало ли кому нужно. Ссылка на мой гитхаб https://github.com/xakplant/stickjaw