使用纯 CSS 切换子元素后保持父高度
Posted
技术标签:
【中文标题】使用纯 CSS 切换子元素后保持父高度【英文标题】：Hold parent height after child element is toggled with pure CSS 【发布时间】：2015-11-08 15:15:43 【问题描述】：在切换子元素后，我需要保持父高度。 父级是引导面板。 #big-menu 是子元素。 div.content 是可以修改其高度的元素。 我已经有了一个 javascript“解决方案”（请参阅 resizeContent 函数）。 我想知道是否有 CSS 解决方案。
Plunker：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>
【问题讨论】：
您的链接打不开。这就是为什么你总是会被建议：拜托拜托，你有所有必要的工具来做这件事，输入最少的代码来重现你的问题 抱歉让您失望了。我在这里添加了代码。 【参考方案1】：我不完全理解您想要实现的目标，但如果您希望隐藏元素仍占用其父元素内部的空间，您可以使用 visibility: hidden 而不是 display: none。
在 JS 中，您需要向要隐藏的元素添加一个类，例如“visuallyhidden”。然后将样式应用于 CSS 中的该类，例如：
.visuallyhidden
visibility: hidden;
【讨论】：
以上是关于使用纯 CSS 切换子元素后保持父高度的主要内容，如果未能解决你的问题，请参考以下文章