Как мне растянуть блок по вертикали на javascript?

Question

Вот у меня имеется такой код:

.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background: gold;
}
.sidebar {
position: relative;
overflow: hidden;
width: 300px;
height: 100%;
background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="sidebar">
</div>
</div>

А как мне растянуть сайдбар на всю страницу по вертикали на javascript, чтобы он и растягивал весь контейнер?

Answer 1

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.sidebar').css('min-height', windowHeight);
  };
  setHeight();
  $(window).resize(function() {
    setHeight();
  });
});

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: gold;
}

.sidebar {
  position: relative;
  overflow: hidden;
  width: 300px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="sidebar">
  </div>
</div>

Answer 2

Это можно сделать при помощи одного CSS.

body {
  height: 100vh;
  margin: 0;
}

В данном примере высота старницы будет считаться по высоте контента, и без содержимого она будет 0. Если вы хотите сделать страницу, в которой будет сайдбар и основной контент, то нужно будет вставить элемент с основным содержимым в container и использовать css-cвойства float / flex / grid.

БЛОГ НА HUSL

Как мне растянуть блок по вертикали на javascript?

Ответы (2 шт):