我無法讓父div展開以適應其內容

我想要標題div（包含background和問候文本）伸展以適應調整窗口大小（隨其內容一起展開）中的文本。我嘗試將overflow:auto和overflow:hidden添加到標頭div以及其父容器，但沒有運氣。我的代碼中是否有衝突導致這不起作用？我無法讓父div展開以適應其內容

這裏的一個的jsfiddle我創建：https://jsfiddle.net/gxpwxhfh/

我有這樣的HTML報頭部分：

<div class='wrap'> 
<div id='header'> 
    <div id='about'> 

     <div id='hello'> 
      <h1>Hello!</h1> 
     </div> 

     <p id='message'>Lorem ipsum dolor<br />sit amet, consectetur<br />adipiscing elit. 
     </p> 

     <div class='button'> 
      <a class='btn' href='#portfolio'>Lorem!</a> 
      <a class='btn' href='#contact'>Ipsum!</a> 
     </div> 
    </div>  
</div> 
</div>

樣式化通過該CSS：

.wrap { 
display: block; 
float: left; 
min-width: 100%; 
overflow: auto; 
} 

#header { 
display: block; 
float: left; 
background: #fff; 
min-width: 100%; 
width: 100%; 
margin: auto; 
min-height: 100vh; 
background-image:url(http://i.imgsafe.org/81ed908.jpg); 
overflow: auto; 
} 

#header, #footer {width: 100%;} 

#about {  
display: block; 
margin: 0 auto; 
position: absolute; 
top: 24%; 
left: 25%; 
width: 48%; 
text-align: center; 
font: 300 3.3em 'Source Sans Pro', sans-serif; 
color: #fff; 
} 

#hello { 
display: inline-block; 
font-weight: 700; 
} 

.button { 
margin: 0 auto; 
padding: 0px 0px; 
} 

.btn { 
margin: 0 auto; 
margin-top: 46px; 
margin-right: 6px; 
margin-left: 6px; 
padding: 9px 27px 9px 27px; 
display: inline-block; 
text-align: center; 
text-decoration: none; 
font-size: 17px; 
color: #fff; 
background: #2de0bc; 
-webkit-border-radius: 5; 
-moz-border-radius: 5; 
border-radius: 5px; 
} 

.btn:hover { 
background: #56edcc; 
text-decoration: none; 
} 

.btn:visited {color: #fff;}

來源

2015-06-29 Cooper

增加了一些媒體的質疑在CSS

@media(max-width:960px){ 
    #about{ 
    font-size: 2.5em; 
    } 
} 
@media(max-width:767px){ 
    #about{ 
    position: static; 
    margin-top: 30px; 
    } 
}

https://jsfiddle.net/gxpwxhfh/7/

來源

2015-06-29 07:59:17

謝謝！這效果很好！ – Cooper