找到你要的答案

Q:Hold parent height after child element is toggled with pure CSS

Q:在子元素的切换纯CSS举行家长高度

I need to hold parent height after a child element is toggled.
The parent is a bootstrap panel. #big-menu is the child element.
div.content is the element which can modify its height.
I already have a javascript 'solution' (see resizeContent function).
I would to know if there is a CSS solution.

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>

I need to hold parent height after a child element is toggled.
The parent is a bootstrap panel. #big-menu is the child element.
div.content is the element which can modify its height.
I already have a javascript 'solution' (see resizeContent function).
I would to know if there is a CSS solution.

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>
answer1: 回答1:

I don't totally understand what you're trying to achieve, but if you want a hidden element to still take up space inside its parent you can use visibility: hidden instead of display: none.

In JS you would need to add a class, for example 'visuallyhidden', to the element you want hide. Then apply styles to that class in CSS like:

.visuallyhidden {
    visibility: hidden;
}

我不完全理解你想要达到的目标,但是如果你想要一个隐藏的元素仍然占用它的父空间,你可以使用可见性:隐藏而不是显示:没有。

JS你需要添加一个类,例如“visuallyhidden ',你想要的元素隐藏。然后将样式应用于该类CSS样:

.visuallyhidden {
    visibility: hidden;
}
javascript  html  css  twitter-bootstrap  height