使父级 Div 高度与子级相同

Question

我有一个容器 div，里面有另外两个 div。一个是显示在左侧的“Home”，另一个是显示在右侧的“Away”。他们肩并肩。

这些 div 内部是其他 div，并且有 Javascript，因此当按下某个元素时，它会使用 CSS 显示来显示/隐藏其他 div。

但是，当我隐藏/取消隐藏这些时，父级高度不会调整，因此一旦打开多个 div，您就看不到显示的 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");

            }

        });

    });

}

如何根据子容器的高度/显示状态调整容器高度？

Answer 1

这是因为您已经为父容器指定了高度match-injuries-container。我已经删除了该height属性并添加了min-height属性，并且它对我来说工作正常。如果不需要，您甚至可以完全删除此属性。$("document").ready(function () {&nbsp; &nbsp; setupInjuries();});function setupInjuries() {&nbsp; &nbsp; $(".match-injury").each(function () {&nbsp; &nbsp; &nbsp; &nbsp; var helpIcon = $(this).find(".match-injury-icon");&nbsp; &nbsp; &nbsp; &nbsp; var shortDescription = $(this).find(".match-injury-shortdescription");&nbsp; &nbsp; &nbsp; &nbsp; var latestButton = $(this).find(".match-injury-latestbutton");&nbsp; &nbsp; &nbsp; &nbsp; var longDescription = $(this).find(".match-injury-longdescription");&nbsp; &nbsp; &nbsp; &nbsp; helpIcon.click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (shortDescription.css("display") == "none") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shortDescription.css("display", "block");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shortDescription.css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longDescription.css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; latestButton.text("SEE LATEST");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; latestButton.click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (longDescription.css("display") == "none") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longDescription.css("display", "block");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).text("HIDE LATEST");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longDescription.css("display", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).text("SEE LATEST");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });}.match-injuries-container {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; /* You can have min-height but not height */&nbsp; &nbsp; min-height: 135px;&nbsp;&nbsp; &nbsp; background-color: #e5e5e5;&nbsp; &nbsp; overflow: hidden;}.match-injuries-home {&nbsp; &nbsp; width: 50%;&nbsp; &nbsp; float: left;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; border-left: 1px solid #9c9c9c;&nbsp; &nbsp; background-color: #e5e5e5;}.match-injuries-away {&nbsp; &nbsp; width: 50%;&nbsp; &nbsp; float: right;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; border-right: 1px solid #9c9c9c;&nbsp; &nbsp; background-color: #e5e5e5;}.match-injury {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; background-color: #d3d3d3;&nbsp; &nbsp; font-size: 13px;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; border-bottom: 1px solid #9c9c9c;&nbsp; &nbsp; border: 1px solid #9c9c9c;&nbsp; &nbsp; border-left: none;&nbsp; &nbsp; cursor: default;&nbsp; &nbsp; position: relative;}.match-injury-detail {&nbsp; &nbsp; height: 25px;&nbsp; &nbsp; padding: 3px 3px 3px 3px;}.match-injury-player {&nbsp; &nbsp; color: #5b5b5b;}.match-injury-status {&nbsp; &nbsp; margin-left: 5px;&nbsp; &nbsp; color: #d20000;}.match-injury-icon {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; right: 5px;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; color: #2b3180;&nbsp; &nbsp; cursor: pointer;}.match-injury-descriptions {&nbsp; &nbsp; padding: 3px 3px 3px 3px;}.match-injury-shortdescription {&nbsp; &nbsp; font-size: 10px;&nbsp; &nbsp; background-color: #f0f0f0;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; padding: 3px 3px 3px 3px;&nbsp; &nbsp; font-weight: normal;&nbsp; &nbsp; display: none;}.match-injury-longdescription {&nbsp; &nbsp; font-size: 10px;&nbsp; &nbsp; background-color: #f0f0f0;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; padding: 3px 3px 3px 3px;&nbsp; &nbsp; font-weight: normal;&nbsp; &nbsp; font-style: italic;&nbsp; &nbsp; display: none;}.match-injury-latestbutton {&nbsp; &nbsp; background-image: linear-gradient(#e5e5e5,#ffffff,#e5e5e5);&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 18px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; border: 1px solid #bbbbbb;&nbsp; &nbsp; font-size: 10px;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; padding-top: 2px;}.match-injury-border {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 4px;&nbsp; &nbsp; 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">&nbsp; &nbsp; <div class="main-header-bar">Injuries</div>&nbsp; &nbsp; <div class="match-injuries-home">&nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-player">Player Name 1</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-status">OUT</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-icon"><i class="fa fa-info-circle"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-shortdescription">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Quadricepts - Expected to be out until atleast July 1st&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-latestbutton">SEE LATEST</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-border"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-player">Player Name 2</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-status">OUT</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-shortdescription">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Quadricepts - Expected to be out until atleast July 1st&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-latestbutton">SEE LATEST</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-border"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-player">Player Name 3</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-status">OUT</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-shortdescription">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Quadricepts - Expected to be out until atleast July 1st&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="match-injury-latestbutton">SEE LATEST</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="match-injuries-away">&nbsp; &nbsp; &nbsp; &nbsp; <span style="font-size:13px;">No reported injuries</span>&nbsp; &nbsp; </div></div>