如何在此示例中根据子维度调整父级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; 
}