我无法让父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