如何在此示例中根據子維度調整父級div的高度？

Question

我正在製作一個部分，列出我正在處理的網站上的用戶評論。我遇到的問題是，當某人發佈審查時間太長時，div不會調整大小以適應文本，因此文本溢出或在div底部切斷。我希望我的問題能夠更具體一些，但是我有很多嵌套的div在這裏，我不知道我應該編輯哪一個。 http://codepen.io/donnaloia/pen/MYKeOB

HTML

<BR> 
<BR> 
<BR> 

<div class="maincontainer"> 
<div class="reviewrow"> 
<div class="commentpanel"> 
<div class="reviewerpic"> 
    <img src="mugshot.img"></div> 

<div class="authordiv"> 
<strong>Reviewed by Dave</strong> 
<div class="stars"><img src="/static/img/stars.png"> </div> 

<hr> 
<div class="reviewcomment">This is less a "pros and cons" review than a hopefully useful commentary about the Kindle compared with other eReaders and what it means for the eBook industry. (I believe that everything has changed with the Kindle's creation.) 

For many years I have been an avid reader of eBooks using almost every eReading device on the market. So as an early-adopter of techie gadgets I had been anxiously awaiting Amazon's Kindle since its first rumors. So I immediately purchased it both out of curiosity and hoping for a better "next generation" eBook solution. In case you're wondering whether I'm "that" Steve Gibson, I probably am -- I'm the guy who gets Google's first three 
So, for what it's worth, if this posting is discovered by any truly interested pre-purchasers, I hope that the following commentary might place the Kindle in "perspective" and be of some value to you. (And if it is, I hope you'll click the button at the bottom to indicate that, so that this review might be found by more potential buyers ... Thank you!)</div> 
</div> 
</div> 
</div> 

<div class="reviewrow"> 
<div class="commentpanel"> 
<div class="reviewerpic"> 
    <img src="{{ i.author.get_profile.get_mugshot_url }}"></div> 

<div class="authordiv"> 
<strong>Reviewed by Cindy</strong> 
<div class="stars"><img src="/static/img/stars.png"> </div> 

<hr> 
<div class="reviewcomment">Hello. This is a short review.</div> 
</div> 
</div> 
</div> 
</div> 

CSS

.maincontainer { 
    position:relative; 
} 
.reviewrow { 
    width: auto; 
    margin-left: 0.9375em; 
    margin-right: 0.9375em; 
    margin-top: 0; 
    margin-bottom: 0; 
} 

.commentpanel{ 
    width:955px; 
    height:115px; 
    border-style: solid; 
    border-width: 1px; 
    border-color:#d8d8d8; 
    background:#f2f2f2; 
    padding:1.25rem; 
    margin-bottom: 12px; 
} 

.reviewerpic { 
    position: relative; 
    width: 90px; 

} 

.authordiv { 
    position: relative; 
    float: right; 
    width: 796px; 
    height: 30px; 
    bottom:87px; 
} 

.stars { 
    width:90px; 
    top: 0px; 
    left:260px; 
    width: 70px; 
    position: absolute; 
} 

.reviewcomment { 
    font-size: 12px; 
    font-weight:100; 
} 

更容易在這裏看http://codepen.io/donnaloia/pen/MYKeOB

Answer 1

改變了一些款式，以滿足它...

.commentpanel{ 
    width:955px; 
    /*height:115px;*/ 
    overflow: auto;/*added*/ 
    border-style: solid; 
    border-width: 1px; 
    border-color:#d8d8d8; 
    background:#f2f2f2; 
    padding:1.25rem; 
    margin-bottom: 12px; 
} 

.authordiv { 
    position: relative; 
    float: right; 
    width: 796px; 
    /* height: 30px;*/ 
    bottom:87px; 
    top: 0px; /**added*/ 
} 

退房的code pen

Answer 2

您使用固定的高度，這就是爲什麼它的行爲就像這個

要麼你需要將高度更改爲自動或最小 - 高度：nnpx

.commentpanel{ 
    width:955px; 
    min-height:115px; 
    border-style: solid; 
    border-width: 1px; 
    border-color:#d8d8d8; 
    background:#f2f2f2; 
    padding:1.25rem; 
    margin-bottom: 12px; 
}