使父级 div 高度与子级相同

Question

I have a container div which has two other divs inside. One is 'Home' which appears on the left side and the other is 'Away' which appears on the right side. They are side by side.

Inside these div's are other divs, and there is Javascript so when a element is pressed it shows/hides other divs using the CSS display.

However, when I hide/unhide these, the parent height doesn't adjust so you can't see the shown div once you open more than one.

Example below:

 $("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>

How do I make the container height adjust to it's children depending on their height/display state?

Answer 1

This is because you have assigned height to your parent container match-injuries-container . I have removed the height property and added min-height property and its working fine for me. You can even remove this property altogether if not needed.

 $("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>