2

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

0

4 ответа 4

7

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

body {
  margin: 0;
}

div {
  height: 100vh;
  background: linear-gradient(blue, red);
}
<div></div>

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

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

div {
  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>

2
  • справедливости ради, не сказано, что надо растянуть "на высоту окна", по этому 100vh - тут лишнее. 30 авг 2017 в 19:18
  • @MedvedevDev, ага, уточнил и добавил ещё grid.
    – Qwertiy
    30 авг 2017 в 19:26
1

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

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

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

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

1
  • Что нового по сравнению с моим ответом?
    – Qwertiy
    6 сен 2017 в 11:41
0

И еще вариант:

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('#block').css('min-height', windowHeight);
  };
  setHeight();
  $(window).resize(function() {
    setHeight();
  });
});
html,
body {
  margin: 0;
  padding: 0;
}

#block {
  width: 100px;
  background-color: chocolate;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.