Question

我希望标题div（包含background和问候语文本）在窗口调整大小时展开以容纳文本（与其内容一起展开）。我尝试将overflow:auto和overflow:hidden添加到标题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;}

Answer 1

从position: absolute

中删除#about

Answer 2

从问候语文本中删除<br />标记。

JSFiddle

Answer 3

在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/

我无法使父div扩展以适应其内容

3 个答案: