使 Parent Div 高度与孩子相同

Question

我有一个容器 div，里面还有另外两个 div。一个是出现在左侧的 'Home'，另一个是出现在右侧的 'Away'。他们并排。

在这些 div 里面是其他 divs，还有 Javascript 所以当一个元素被按下时它 shows/hides 其他 divs使用 CSS 显示。

但是，当我 hide/unhide 这些时，parent 高度不会调整，所以你无法看到显示 div 一旦你打开多个。

示例如下：

$("document").ready(function () {
    setupInjuries();
});

function setupInjuries() {
    $(".match-injury").each(function () {

        var helpIcon = $(this).find(".match-injury-icon");
        var shortDescription = $(this).find(".match-injury-shortdescription");
        var latestButton = $(this).find(".match-injury-latestbutton");
        var longDescription = $(this).find(".match-injury-longdescription");

        helpIcon.click(function () {

            if (shortDescription.css("display") == "none") {
                shortDescription.css("display", "block");
            }
            else {
                shortDescription.css("display", "none");
                longDescription.css("display", "none");
                latestButton.text("SEE LATEST");
            }

        });

        latestButton.click(function () {

            if (longDescription.css("display") == "none") {
                longDescription.css("display", "block");
                $(this).text("HIDE LATEST");
            }
            else {
                longDescription.css("display", "none");
                $(this).text("SEE LATEST");
            }

        });

    });
}

.match-injuries-container {
    width: 100%;
    height: 135px;
    background-color: #e5e5e5;
    overflow: hidden;
}

.match-injuries-home {
    width: 50%;
    float: left;
    text-align: center;
    display: inline-block;
    border-left: 1px solid #9c9c9c;
    background-color: #e5e5e5;
}

.match-injuries-away {
    width: 50%;
    float: right;
    text-align: center;
    display: inline-block;
    border-right: 1px solid #9c9c9c;
    background-color: #e5e5e5;
}

.match-injury {
    width: 100%;
    height: auto;
    background-color: #d3d3d3;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #9c9c9c;
    border: 1px solid #9c9c9c;
    border-left: none;
    cursor: default;
    position: relative;
}

.match-injury-detail {
    height: 25px;
    padding: 3px 3px 3px 3px;
}

.match-injury-player {
    color: #5b5b5b;
}

.match-injury-status {
    margin-left: 5px;
    color: #d20000;
}

.match-injury-icon {
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 15px;
    color: #2b3180;
    cursor: pointer;
}

.match-injury-descriptions {
    padding: 3px 3px 3px 3px;
}

.match-injury-shortdescription {
    font-size: 10px;
    background-color: #f0f0f0;
    height: auto;
    padding: 3px 3px 3px 3px;
    font-weight: normal;
    display: none;
}

.match-injury-longdescription {
    font-size: 10px;
    background-color: #f0f0f0;
    height: auto;
    padding: 3px 3px 3px 3px;
    font-weight: normal;
    font-style: italic;
    display: none;
}

.match-injury-latestbutton {
    background-image: linear-gradient(#e5e5e5,#ffffff,#e5e5e5);
    width: 100%;
    height: 18px;
    text-align: center;
    border: 1px solid #bbbbbb;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    padding-top: 2px;
}

.match-injury-border {
    width: 100%;
    height: 4px;
    background-image: linear-gradient(#9a9a9a, white, #9a9a9a);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="match-injuries-container">

    <div class="main-header-bar">Injuries</div>

    <div class="match-injuries-home">
        <div class="match-injury">
            <span class="match-injury-player">Player Name 1</span>
            <span class="match-injury-status">OUT</span>
            <div class="match-injury-icon"><i class="fa fa-info-circle"></i></div>
            <div class="match-injury-shortdescription">
                Quadricepts - Expected to be out until atleast July 1st
                <div class="match-injury-latestbutton">SEE LATEST</div>
            </div>
            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
        </div>

        <div class="match-injury-border"></div>

        <div class="match-injury">
            <span class="match-injury-player">Player Name 2</span>
            <span class="match-injury-status">OUT</span>
            <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
            <div class="match-injury-shortdescription">
                Quadricepts - Expected to be out until atleast July 1st
                <div class="match-injury-latestbutton">SEE LATEST</div>
            </div>
            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
        </div>

        <div class="match-injury-border"></div>

        <div class="match-injury">
            <span class="match-injury-player">Player Name 3</span>
            <span class="match-injury-status">OUT</span>
            <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
            <div class="match-injury-shortdescription">
                Quadricepts - Expected to be out until atleast July 1st
                <div class="match-injury-latestbutton">SEE LATEST</div>
            </div>
            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
        </div>
    </div>

    <div class="match-injuries-away">
        <span style="font-size:13px;">No reported injuries</span>
    </div>
</div>

如何根据容器的 height/display 状态将容器高度调整到 children？

Answer 1

这是因为您已经为父容器指定了高度match-injuries-container。我删除了 height 属性并添加了 min-height 属性并且它对我来说工作正常。如果不需要，您甚至可以完全删除此属性。

$("document").ready(function () {
    setupInjuries();
});

function setupInjuries() {
    $(".match-injury").each(function () {

        var helpIcon = $(this).find(".match-injury-icon");
        var shortDescription = $(this).find(".match-injury-shortdescription");
        var latestButton = $(this).find(".match-injury-latestbutton");
        var longDescription = $(this).find(".match-injury-longdescription");

        helpIcon.click(function () {

            if (shortDescription.css("display") == "none") {
                shortDescription.css("display", "block");
            }
            else {
                shortDescription.css("display", "none");
                longDescription.css("display", "none");
                latestButton.text("SEE LATEST");
            }

        });

        latestButton.click(function () {

            if (longDescription.css("display") == "none") {
                longDescription.css("display", "block");
                $(this).text("HIDE LATEST");
            }
            else {
                longDescription.css("display", "none");
                $(this).text("SEE LATEST");
            }

        });

    });
}

.match-injuries-container {
    width: 100%;
    /* You can have min-height but not height */
    min-height: 135px; 
    background-color: #e5e5e5;
    overflow: hidden;
}

.match-injuries-home {
    width: 50%;
    float: left;
    text-align: center;
    display: inline-block;
    border-left: 1px solid #9c9c9c;
    background-color: #e5e5e5;
}

.match-injuries-away {
    width: 50%;
    float: right;
    text-align: center;
    display: inline-block;
    border-right: 1px solid #9c9c9c;
    background-color: #e5e5e5;
}

.match-injury {
    width: 100%;
    height: auto;
    background-color: #d3d3d3;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #9c9c9c;
    border: 1px solid #9c9c9c;
    border-left: none;
    cursor: default;
    position: relative;
}

.match-injury-detail {
    height: 25px;
    padding: 3px 3px 3px 3px;
}

.match-injury-player {
    color: #5b5b5b;
}

.match-injury-status {
    margin-left: 5px;
    color: #d20000;
}

.match-injury-icon {
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 15px;
    color: #2b3180;
    cursor: pointer;
}

.match-injury-descriptions {
    padding: 3px 3px 3px 3px;
}

.match-injury-shortdescription {
    font-size: 10px;
    background-color: #f0f0f0;
    height: auto;
    padding: 3px 3px 3px 3px;
    font-weight: normal;
    display: none;
}

.match-injury-longdescription {
    font-size: 10px;
    background-color: #f0f0f0;
    height: auto;
    padding: 3px 3px 3px 3px;
    font-weight: normal;
    font-style: italic;
    display: none;
}

.match-injury-latestbutton {
    background-image: linear-gradient(#e5e5e5,#ffffff,#e5e5e5);
    width: 100%;
    height: 18px;
    text-align: center;
    border: 1px solid #bbbbbb;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    padding-top: 2px;
}

.match-injury-border {
    width: 100%;
    height: 4px;
    background-image: linear-gradient(#9a9a9a, white, #9a9a9a);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="match-injuries-container">

    <div class="main-header-bar">Injuries</div>

    <div class="match-injuries-home">
        <div class="match-injury">
            <span class="match-injury-player">Player Name 1</span>
            <span class="match-injury-status">OUT</span>
            <div class="match-injury-icon"><i class="fa fa-info-circle"></i></div>
            <div class="match-injury-shortdescription">
                Quadricepts - Expected to be out until atleast July 1st
                <div class="match-injury-latestbutton">SEE LATEST</div>
            </div>
            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
        </div>

        <div class="match-injury-border"></div>

        <div class="match-injury">
            <span class="match-injury-player">Player Name 2</span>
            <span class="match-injury-status">OUT</span>
            <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
            <div class="match-injury-shortdescription">
                Quadricepts - Expected to be out until atleast July 1st
                <div class="match-injury-latestbutton">SEE LATEST</div>
            </div>
            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
        </div>

        <div class="match-injury-border"></div>

        <div class="match-injury">
            <span class="match-injury-player">Player Name 3</span>
            <span class="match-injury-status">OUT</span>
            <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
            <div class="match-injury-shortdescription">
                Quadricepts - Expected to be out until atleast July 1st
                <div class="match-injury-latestbutton">SEE LATEST</div>
            </div>
            <div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
        </div>
    </div>

    <div class="match-injuries-away">
        <span style="font-size:13px;">No reported injuries</span>
    </div>
</div>

使 Parent Div 高度与孩子相同

Make Parent Div height same as childs

html

javascript

height

containers