将容器调整到窗口高度

Question

function resizeGridIscroll(){
  var $windowWidth = $(window).width();
  var $windowHeight = $(window).height();

  var $itemHeight = $('.container').height();
  $('.container').css('min-height', $itemHeight - 1);
}

 $(window).resize(function(){
   resizeGridIscroll();
})

.container {
  min-height: 100vh;
  display: flex;
}

.bloc {
  flex: 1;
}

<div class="container">
  <div class="bloc bloc1"></div>
  <div class="bloc bloc2"></div>
  <div class="bloc bloc3"></div>
  <div class="bloc bloc4"></div> 
</div>

使用这种代码结构，我希望缩小容器的高度以调整浏览器的大小。

js代码部分工作。当我们缩小窗口时，容器的高度会减小，但如果我们的窗口变大，它会继续缩小。

有没有办法预测浏览器扩大或收缩？

谢谢

Codepen avaiblable

Answer 1

由于您设置min-height .container的高度将保留在resizeGridIsScroll()的第二次调用中。

尝试以下方法：

function resizeGridIscroll(){
  var $windowWidth = $(window).width(),
      $windowHeight = $(window).height(),
      $itemHeight;

  // reset the min-height of .container first
  $('.container').css('min-height', '');

  $itemHeight = $('.container').height();
  $('.container').css('min-height', $itemHeight - 1);
}