Javascript 使用纯CSS切换子元素后保持父元素高度

切换子元素后，我需要保持父元素的高度。
父级是一个引导面板#大菜单是子元素。
div.content是可以修改其高度的元素。
我已经有了一个javascript“解决方案”（请参阅resizeContent函数）。
我想知道是否有CSS解决方案

普朗克：
JSFiddle:

var=false；
函数动作（）{
var hBefore=$（'.panel'）.height（）；
如果（打开）{
$（“#大菜单”）.hide（）
}否则{
$（“#大菜单”）.show（）；
}
打开=！打开；
resizeContent（）；//注释此行以查看我的问题
var hAfter=$（'.panel'）.height（）；
$（“#大菜单”）.html（'big menu
hBefore:'+hBefore+'hAfter:'+hAfter）；
}
函数resizeContent（）{
如果（打开）{
$（'.content'）。高度（250）；//300-50
}否则{
$（'.content'）。高度（300）；
}
}
标题

foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
foo
最后一项

菜单
显示

我不完全理解您试图实现的目标，但如果您希望隐藏元素仍占据其父元素内部的空间，则可以使用

可见性：隐藏

而不是

显示：无

在JS中，您需要向要隐藏的元素添加一个类，例如“visuallyhidden”。然后在CSS中将样式应用于该类，如：

.visuallyhidden {
    visibility: hidden;
}

---

你的链接无法打开。这就是为什么你总是被建议：请，你有所有必要的工具来做这件事，请输入最小的代码，把你的问题直接复制到你的问题中对不起，让你失望了。我在这里添加了代码。

.visuallyhidden {
    visibility: hidden;
}