jquery - 在网格中的 SlideToggle 上保持单元格 100% 高度

Question

点击LEFT - 您会看到 - 它失去了 100% 的高度。如何保持 LEFT 始终为全高，无论 TOP 是否可见。

$('.left').on('click', function() {
  $('#top').slideToggle();
});

.parent {
  position: fixed;
  width: 70%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
  grid-gap: 5px;
  height: 100vh;
  background: lightgreen;
}

.top {
  grid-column: auto / span 2;
  background: gold;
  padding: 25px 0;
}

.left {
  background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='top' id='top'>TOP</div>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>

Answer 1

在 left css 中使用 height:inherit 可能会解决您的问题

.left {
  background: lightblue;
  height:inherit
}

$('.left').on('click', function() {
  $('#top').slideToggle();
});

.parent {
  position: fixed;
  width: 70%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
  grid-gap: 5px;
  height: 100vh;
  background: lightgreen;
}

.top {
  grid-column: auto / span 2;
  background: gold;
  padding: 25px 0;
}

.left {
  background: lightblue;
  height:inherit
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='top' id='top'>TOP</div>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>