有无DIV自动调整使用Content - CSS

Question

直接链接到问题：http://s18.postimg.org/f55rkfl1l/issue.png

<div class="overall_content"> 
     <div class="content"> 
      <p>jessicaPhotography<br><img src="images/heart.png"></p> 
      <div class="content_picture"> 
        <p class="main"> 
        This is where the revolving images will appea 
        This is where the revolving images will appea 
        This is where the revolving images will appea 
        This is where the revolving images will appea 
        This is where the revolving images will appea 
        </p> 
      </div> 
     </div> 
    </div> 

有人可以帮助我理解为什么我不能让我的内容股利与段落标记中的文本扩大。这里是我的CSS：

html, body, header, p, h1, h2, h3, h4, h5, h6, img, .content { 
padding: 0px; 
margin: 0px; 
} 

html { 
background: url('images/background_gradient.png') repeat; 
} 

header { 
width: 100%; 
height: 30px; 
background: rgb(0,0,0); 
} 

.overall_content { 
width: 84%; 
height: 100%; 
background: rgb(255,255,255); 
margin: 0px auto; 
margin-top: .5%; 
position: relative; 
} 

.content { 
width: 98%; 
height: 98%; 
background: rgb(0,0,0); 
position: absolute; 
top: 1%; 
left: 1%; 
} 

附加信息

.content_picture { 
height: 100%; 
width: 100%; 
} 

/********************************/ 
/* Intrinsic Content Properties */ 
/********************************/ 

.content p.main { 
color: rgb(255,255,255); 
font-family: Verdana, Arial; 
font-size: 18px; 
padding: 25px; 

} 

Answer 1

的问题是，你已经设置一个固定的宽度和高度。 .content每次都会有.overall-content的98％的大小，独立于其内容。 当你设置高度为自动，应该可以解决你的问题。

Answer 2

取出height限制，那么如果你添加一些文字，那么div会更少或更多高（适用于您的内容...;）