Jquery 在网格中滑动切换时保持单元格100%高度

点击左边的

-你会看到-它失去了100%的高度。如何保持

左侧

始终为全高，而不管

顶部

是否可见

$（'.left'）。在（'click'，function（）上{
$（“#顶部”）.slideToggle（）；
});
.parent{
位置：固定；
宽度：70%；
显示：网格；
网格模板列：50%50%；
网格模板行：自动1fr；
网格间距：5px；
高度：100vh；
背景：浅绿色；
}
.顶{
格线柱：自动/跨度2；
背景：金；
填充：25px0；
}
.左{
背景：浅蓝色；
}

顶部
左边
正确的
只需添加高度：100vh至
。左侧为css

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


$（文档）.ready（函数（）{
$（'.left'）。在（'click'，function（）上{
$（“#顶部”）.slideToggle（）；
});
});
.parent{
位置：固定；
宽度：70%；
显示：网格；
网格模板列：50%50%；
网格模板行：自动1fr；
网格间距：5px；
高度：100vh；
背景：浅绿色；
}
.顶{
格线柱：自动/跨度2；
背景：金；
填充：25px0；
}
.左{
背景：浅蓝色；
高度：100vh；
}

顶部
左边
正确的
在
左侧的
css中使用
height:inherit
，可能会解决您的问题

.left {
  background: lightblue;
  height:inherit
}


$（'.left'）。在（'click'，function（）上{
$（“#顶部”）.slideToggle（）；
});
.parent{
位置：固定；
宽度：70%；
显示：网格；
网格模板列：50%50%；
网格模板行：自动1fr；
网格间距：5px；
高度：100vh；
背景：浅绿色；
}
.顶{
格线柱：自动/跨度2；
背景：金；
填充：25px0；
}
.左{
背景：浅蓝色；
身高：继承
}

顶部
左边
正确的
要顺利完成这一任务，您需要做两件事

首先，您需要了解，当您切换某些内容时，它将从DOM中消失，这意味着将接收网格模板行的第一个元素将是left元素。你希望那是1fr

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

希望有帮助：）


$（'.left'）。在（'click'，function（）上{
$（'#top'）。滑动切换（（800，函数（）{
$（'.parent'）.css（'grid-template-rows'，'1fr'）；
}));
});
.parent{
位置：固定；
宽度：70%；
显示：网格；
网格模板列：50%50%；
网格模板行：自动1fr；
网格间距：5px；
高度：100vh；
背景：浅绿色；
}
.顶{
格线柱：自动/跨度2；
背景：金；
填充：25px0；
}
.左{
背景：浅蓝色；
}

顶部
左边
正确的
hmm。。。在这种情况下，
LEFT
的内部内容将位于底部滚动区域之外，即将被隐藏。这仅适用于第一次单击。第二次单击后，.parent div将保留在网格模板行中：1您可以添加标志来切换正确的函数并更改类，但主要目的是帮助了解实际发生的情况，以及为什么会出现这种行为，而不仅仅是提供一个可以复制/粘贴的解决方案。我总是喜欢更多地了解为什么会发生这样的事情。