用純CSS切換子元素後保持父高度

在切換子元素後，需要保持父高度。
父級是引導面板。＃big-menu是子元素。
div.content是可以修改其高度的元素。
我已經有一個JavaScript'解決方案'（請參閱resizeContent函數）。
我想知道是否有CSS解決方案。用純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>

來源

2015-08-15 pedrotech

您的鏈接將不會打開。這就是爲什麼你總是會被建議：請請，請你有所有必要的工具，輸入最小的代碼，將問題重現到你的問題 –

對不起。我在這裏添加了代碼。 – pedrotech

我不完全理解你想達到什麼樣的，但如果你想有一個隱藏的元素仍然佔據其母公司內部空間你可以使用visibility: hidden而不是display: none。

在JS中，您需要爲要隱藏的元素添加一個類，例如'可視化隱藏'。然後將樣式應用於CSS中的該類：

.visuallyhidden { 
    visibility: hidden; 
}

來源

2015-08-15 15:01:52 Andrew

用純CSS切換子元素後保持父高度

回答

相關問題