我需要在切换子元素后保持父元素的高度。
父级是一个 Bootstrap 面板。 #big-menu 是子元素。
div.content 是可以修改高度的元素。
我已经有了一个 javascript“解决方案”(请参阅 resizeContent 函数)。
我想知道是否有 CSS 解决方案。
笨蛋:http://plnkr.co/edit/tDYZ5YeppCtOgShw97Em
JSFiddle:https://jsfiddle.net/pedrobad/p2b3uufd/
<!doctype html>
</html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
var opened = false;
function action() {
var hBefore = $('.panel').height();
if (opened){
$('#big-menu').hide()
} else {
$('#big-menu').show();
}
opened = !opened;
resizeContent(); // comment this line to see my issue
var hAfter = $('.panel').height();
$('#big-menu').html('BIG MENU <br/>hBefore: ' + hBefore + ' hAfter: ' + hAfter);
}
function resizeContent() {
if (opened){
$('.content').height(250); // 300 - 50
} else {
$('.content').height(300);
}
}
</script>
</head>
<body>
<div class='panel'>
<div class='panel-heading'><h2>Heading</h2></div>
<div class='panel-body'>
<div class='content' style="overflow-y: scroll; height: 300px; background-color: grey;">
<ul>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>LAST ITEM</li>
</ul>
</div>
</div>
<div class='panel-footer'>
<div id='big-menu' style="height: 50px; display: none">MENU</div>
<button onclick='action()'>Show</button>
</div>
</div>
</body>
</html>
最佳答案
我不完全明白你想要达到什么目的，但如果你想让一个隐藏元素仍然占据其父级内部的空间，你可以使用 visibility: hidden 而不是 显示:无。
在 JS 中，您需要为要隐藏的元素添加一个类，例如“visuallyhidden”。然后在 CSS 中将样式应用于该类，例如:
.visuallyhidden {
visibility: hidden;
}
关于javascript - 使用纯 CSS 切换子元素后保持父高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32025752/