使父级 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"); } }); }); }

 .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>

如何根据孩子的高度/显示 state 调整容器高度以适应其孩子？

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>