Растянуть элемент на всю высоту

444

01 сентября 2017, 21:13

Как растянуть элемент на всю высоту не используя height:100%?

Answer 1

Относительно окна :: 100vh

body { 
  margin: 0; 
} 
 
div { 
  height: 100vh; 
  background: linear-gradient(blue, red); 
}

<div></div>

Относительно окна :: absolute / fixed

div { 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  background: linear-gradient(blue, red); 
}

<div></div>

Относительно контейнера :: absolute

section { 
  position: relative; 
 
  min-height: 120px; 
  margin: 1em; 
  outline: 1px dotted green; 
} 
 
div { 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  background: linear-gradient(blue, red); 
}

<section><div></div></section>

Относительно контейнера :: flex

section { 
  display: flex; 
   
  min-height: 120px; 
  margin: 1em; 
  outline: 1px dotted green; 
} 
 
div { 
  width: 100%; 
  background: linear-gradient(blue, red); 
}

<section><div></div></section>

Относительно контейнера :: grid

section { 
  display: grid; 
   
  min-height: 120px; 
  margin: 1em; 
  outline: 1px dotted green; 
} 
 
div { 
  background: linear-gradient(blue, red); 
}

<section><div></div></section>

Answer 2

используй width:100%;

уверяю тебя, что что элемент растянется на всю ширину, и как видишь без height:100%

Answer 3

.block{
   height: 100vh; /* 1vh = 1% от выстоты холста браузера*/
}

Это если относительно только окна браузера, тогда в "vh" Также если присвоить элементу position: absolute; или position: fixed; можно и в процентах. Внутри блока тоже в процентах.