将单元格保持在滑块上的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

在leftcss中使用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>

Answer 2

只需将height: 100vh;添加到.left in css

.left {
background: lightblue;
height: 100vh;
} 

$(document).ready(function() {
$('.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: 100vh;
}

<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 3

要顺利完成这项工作，需要做两件事。

第一件事是，您需要理解，当切换某个内容时，它会从DOM中消失，这意味着将接收网格模板行的第一个元素将是左侧元素。你希望它是1fr。

第二是时机。由于函数是非阻塞的，这意味着如果在一行中设置动画并更改下一行的属性，它们将并行运行。如果将它们附加到幻灯片切换，则可以将其执行推迟到动画结束时。http://api.jquery.com/slidetoggle/

希望能有所帮助：(

$('.left').on('click', function() {
$('#top').slideToggle(( 800, function() {
$('.parent').css('grid-template-rows', '1fr');
}));
});

.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>