Question

如何扩展父div的高度（带背景）以在孩子溢出时包裹孩子？ class detail我可能有多个项目。当div get_there_text溢出其父级时，我希望div detail扩展其高度，以便背景颜色也会覆盖溢出的内容，如示例所示。

您可以在下面提供关于小提琴的示例。

#main_content #result{width: 100%;margin-top: 153px}
#main_content .detail{background: #afaafa;width: 758px;margin: 0px auto 20px auto}
#main_content .detail .title{padding-left: 21px;font-size: 28px;font-weight: 700px;padding-top: 19px;border-bottom: 1px solid #f3f3f3}
#main_content .detail .title a{text-decoration: none;color:#F05634}
#main_content .detail .subtitle{font-size: 19px;font-weight: 500px;line-height: 13px;margin-bottom: 15px;}
#main_content .subcontent{width: calc(100% - 40px);margin: 20px;width: -moz-calc(100% - 40px);padding-bottom: 15px}
#main_content .detail .left-col{margin-right: 40px;background-size: cover;height:203px;background-repeat: no-repeat;display: inline-block;width: 40%}
#main_content .detail .right-col{height: auto;position: relative;display: inline-block;width: 53%;font-size: 13px;color: #333333;height: 203px;vertical-align: top}
#main_content .detail .record {line-height: 26px}
#main_content .detail .record .col1{display:inline-block;display: table-cell;width: 113px}
#main_content .detail .record .col2{display:inline-block;display: table-cell;}
#main_content .detail .button-wrapper{position: absolute;bottom: 0}
#main_content .btn-default{width: 200px; height: 41px;color:#FFF;font-size: 19px;font-weight: bold}
#main_content .btn-orange{background-color:#F05634;border:1px solid #F05634}
#main_content .btn-orange.active,#main_content .btn-orange:active,#main_content .btn-orange.focus,#main_content .btn-orange:focus,#main_content .btn-orange:hover{background-color:#F05634;color:#FFF;border:1px solid #F05634;box-shadow:none}
#main_content .btn-inactive{background-color:#999999;cursor:default;}
#main_content .detail .mint-wrapper{position: absolute;bottom: 0;display: inline-block;}
#main_content .detail .mint{cursor: pointer;font-size: 16px;font-weight: 500;width: 262px;height: 32px;background-color: #6CC9C9;color: #ffffff;text-align: center;vertical-align: middle;line-height: 32px}
#main_content .detail .get_there_text{display: inline-block;margin-top: 22px;font-size: 13px;font-weight: 500;color: #333333;line-height: 16px;position: absolute;}
#main_content .detail .mint img{margin-left: 7px}

<div id="main_content">
  <div id="result">
        <div class="detail">
            <input type="hidden" id="tour_idx" value="<?=$tour->tour_idx?>" />
            <div class="title"><a href="/experience/detail/<?=$tour->custom_url?>" target="_blank">title<br/><span class="subtitle">substitle</span></a></div>
            <div class="subcontent">
              <div class="left-col" background-image="http://curiositysip.com/wp-content/uploads/2015/08/Tulip-8.jpg"></div>
              <div class="right-col">
                  <div class="record">
                    <div class="col1"><b>Meet Location</b></div><div class="col2">meet here</div>
                  </div>
                  <div class="record">
                    <div class="col1"><b>Date</b></div><div class="col2">1</div>
                  </div>
                  <div class="record">
                    <div class="col1"><b>Time</b></div><div class="col2">2</div>
                  </div>
                  <div class="record">
                    <div class="col1"><b>Participants</b></div><div class="col2">1</div>
                  </div>
                  <div class="mint-wrapper"><div class="mint">How to get there<div class="get_there_text">We are going to meet at around 6PM in front of starbucks, please everyone should wear red shirt on that day and bring a rose with you</div>
              </div>
            </div>
        </div>
    </div>
</div>

Expanding div height when child is overflowing

Answer 1

AS @Marcos已经告诉过你，你正在使用溢出父级的绝对定位元素。当您使用position:absolute时，您使用html流的元素OUT，不可能通过css使父级高度与子项匹配。

但是，如果您无法更改absolute已定位元素，则可以始终使用jquery。此脚本将计算subcontent内每个元素的高度，并将此高度应用于自身：

$( document ).ready(function() {
    $( ".subcontent" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
});

<强> JSFIDDLE

Answer 2

很难理解你，但你的问题是绝对的定位。如果没有真正深入理解它的工作原理，就不能使用绝对定位。在这里你是变化：

http://jsfiddle.net/t6byn73e/2/

#main_content .detail .get_there_text { position:relative; } 
#main_content .detail .mint-wrapper { position: relative;}

请参阅代码段：

#main_content #result{width: 100%;margin-top: 153px}
#main_content .detail{background: #afaafa;width: 758px;margin: 0px auto 20px auto}
#main_content .detail .title{padding-left: 21px;font-size: 28px;font-weight: 700px;padding-top: 19px;border-bottom: 1px solid #f3f3f3}
#main_content .detail .title a{text-decoration: none;color:#F05634}
#main_content .detail .subtitle{font-size: 19px;font-weight: 500px;line-height: 13px;margin-bottom: 15px;}
#main_content .subcontent{width: calc(100% - 40px);margin: 20px;width: -moz-calc(100% - 40px);padding-bottom: 15px}
#main_content .detail .left-col{margin-right: 40px;background-size: cover;height:203px;background-repeat: no-repeat;display: inline-block;width: 40%}
#main_content .detail .right-col{height: auto;position: relative;display: inline-block;width: 53%;font-size: 13px;color: #333333;height: 203px;vertical-align: top}
#main_content .detail .record {line-height: 26px}
#main_content .detail .record .col1{display:inline-block;display: table-cell;width: 113px}
#main_content .detail .record .col2{display:inline-block;display: table-cell;}
#main_content .detail .button-wrapper{position: absolute;bottom: 0}
#main_content .btn-default{width: 200px; height: 41px;color:#FFF;font-size: 19px;font-weight: bold}
#main_content .btn-orange{background-color:#F05634;border:1px solid #F05634}
#main_content .btn-orange.active,#main_content .btn-orange:active,#main_content .btn-orange.focus,#main_content .btn-orange:focus,#main_content .btn-orange:hover{background-color:#F05634;color:#FFF;border:1px solid #F05634;box-shadow:none}
#main_content .btn-inactive{background-color:#999999;cursor:default;}
#main_content .detail .mint-wrapper{position: absolute;bottom: 0;display: inline-block;}
#main_content .detail .mint{cursor: pointer;font-size: 16px;font-weight: 500;width: 262px;height: 32px;background-color: #6CC9C9;color: #ffffff;text-align: center;vertical-align: middle;line-height: 32px}
#main_content .detail .get_there_text{display: inline-block;margin-top: 22px;font-size: 13px;font-weight: 500;color: #333333;line-height: 16px;position: absolute;}
#main_content .detail .mint img{margin-left: 7px}

#main_content .detail .get_there_text { position:relative; } 
#main_content .detail .mint-wrapper { position: relative;}

<div id="main_content">
  <div id="result">
        <div class="detail">
            <input type="hidden" id="tour_idx" value="<?=$tour->tour_idx?>" />
            <div class="title"><a href="/experience/detail/<?=$tour->custom_url?>" target="_blank">title<br/><span class="subtitle">substitle</span></a></div>
            <div class="subcontent">
              <div class="left-col" background-image="http://curiositysip.com/wp-content/uploads/2015/08/Tulip-8.jpg"></div>
              <div class="right-col">
                  <div class="record">
                    <div class="col1"><b>Meet Location</b></div><div class="col2">meet here</div>
                  </div>
                  <div class="record">
                    <div class="col1"><b>Date</b></div><div class="col2">1</div>
                  </div>
                  <div class="record">
                    <div class="col1"><b>Time</b></div><div class="col2">2</div>
                  </div>
                  <div class="record">
                    <div class="col1"><b>Participants</b></div><div class="col2">1</div>
                  </div>
                  <div class="mint-wrapper"><div class="mint">How to get there<div class="get_there_text">We are going to meet at around 6PM in front of starbucks, please everyone should wear red shirt on that day and bring a rose with you</div>
              </div>
            </div>
        </div>
    </div>
</div>

Css技巧在溢出时扩展父div高度

2 个答案: