高度撑开

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header class="header">
<div class="header__wrap">
<div class="header__logo">慕课手机</div>
<nav class="header__nav">
<a href="javascript:;" class="header__nav-item header__nav-item_status_active">外观</a>
<a href="javascript:;" class="header__nav-item">配置</a>
<a href="javascript:;" class="header__nav-item">型号</a>
<a href="javascript:;" class="header__nav-item">说明</a>
<a href="javascript:;" class="header__nav-item">其他产品</a>
<a href="javascript:;" class="header__nav-item header__nav-item_custom_button">立即购买</a>
</nav>
</div>
</header>

<div class="screen-1">
<h2 class="screen-1__heading"><b>慕课手机</b> 让你的生活更精彩</h2>
<div class="screen-1__phone"></div>
<div class="screen-1__shadow"></div>
</div>

<div class="screen-2">
<h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
<h3 class="screen-2__subheading">采用受欢迎的设计，让它更加出色。<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-2__phone">
<div class="screen-2__point screen-2__point_i_1">高清摄像</div>
<div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
<div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
</div>
</div>

<div class="screen-3">
<div class="screen-3__wrap">
<h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
<h3 class="screen-3__subheading">采用受欢迎的设计，让它更加出色。</br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-3__phone"></div>
</div>
</div>

<div class="screen-4">

</div>

</body>
</html>
base.css
body{
margin:0;
padding: 0;
background:#fff;
font-size:12px;
font-family:"Microoft Yahei",微软雅黑;
}
a{
text-decoration:none;
}
h2,h3{
margin:0;
padding: 0;
font-weight:normal;
}
index.css
/*
BEM设计模式

模块（没有前缀，多个单词用 - 连接）
元素（元素在模块之后，可以有多个层级，以 __ 连接）
修饰（某元素、或者某模块特别的状态，必须有一个状态名和状态值，使用 _ 连接）
*/

.header{

background-color:#f7f7f7;

}
.header__wrap{
width:1200px;
height:80px;
position:relative;
margin:0 auto;
}
.header__logo{
width:150px;
height:38px;
line-height:38px;
font-size:20px;
color:#07111b;
text-indent:50px; /* padding-left:50px;距离左侧50像素两种方法都可以 */
background:url("../img/logo.png") left center no-repeat;
background-size:38px 38px;
position:absolute;
top:50%;
margin-top:-19px;
left:20px;

}
.header__nav{
position:absolute;
right:20px;
height:38px;
top:50%;
margin-top:-19px;

}
.header__nav-item{
font-size:14px;
color:#292f35;
display:block;
height:38px;
line-height:38px;
float:left;
margin-left:40px;
position:relative;
}
.header__nav-item:hover{
color:#f01400;
}
.header__nav-item_status_active{
color:#f01400;
}
.header__nav-item_status_active:after{
content:"";
display: block;
width:100%;
height:2px;
background-color:#f01400;
position:absolute;
left:0;
bottom:0;
}

.header__nav-item_custom_button{
background:#000;
color:#f4f4f5;
width:90px;
text-align:center;
border-radius:3px;

}
/*第一屏*/
.screen-1{
height:800px;
background-color:#e7e7e7;
position:relative;
overflow:hidden;
background:url("../img/bg-screen-1.png") no-repeat center ;
background-size:cover;
}
.screen-1__heading{
font-weight:normal;
font-size:46px;
color:#4d555d;
text-align:center;
padding-top:152px;
}
.screen-1__heading b{
color:#f01400;
font-weight:normal;
font-size:46px;
}
.screen-1__phone{
width:1375px;
height:305px;
background:url("../img/screen-1-phone.png") no-repeat center;
position:absolute;
left:50%;
margin-left:-687px;
bottom:180px;
z-index:2;
}
.screen-1__shadow{
width:1233px;
height:411px;
background:url("../img/screen-1-shadow.png") no-repeat center;
position:absolute;
left:50%;
margin-left:-616px;
bottom:30px;
opacity:.8;
z-index:1;
}

/*第二屏*/
.screen-2{
background-color:#fafafa;
height:800px;
position:relative;
overflow:hidden;
}
.screen-2__heading{
font-weight:normal;
font-size:46px;
line-height:46px;
color:#f01400;
text-align:center;
padding-top:96px;
}
.screen-2__subheading{
font-weight:normal;
font-size:14px;
color:#2c3137;
text-align:center;
padding-top:25px;
line-height:28px;
}
.screen-2__phone{
width:928px;
height:873px;
background:url("../img/screen-2-phone.png") no-repeat center;
position:absolute;
left:50%;
margin-left:-464px;
bottom:-345px;
z-index:2;
}
.screen-2__point{
width:108px;
height:22px;
padding-right:112px;
font-size:22px;
line-height:22px;
color:#4d555d;
background:url("../img/icon-point-right.png") no-repeat right center;
position:absolute;
}
.screen-2__point_custom_right{
padding:0 0 0 112px;
background:url("../img/icon-point-left.png") no-repeat left center;
}
.screen-2__point_i_1{
top:150px;
left:-164px;
}
.screen-2__point_i_2{
right:150px;
top:30px;
}
.screen-2__point_i_3{
right:30px;
top:330px;
}
/*第三屏*/
.screen-3{
background-color:#f00;
height:800px;
position:relative;
background:url("../img/bg-screen-3.png") no-repeat center;
background-size:cover;
}
.screen-3__wrap{
width:1200px;
height:auto;
margin:0 auto;
overflow:hidden;
position: relative;
}
.screen-3__heading{
color:#fff;
font-size:46px;
line-height:46px;
text-align:left;
padding-top:94px;

}
.screen-3__subheading{
font-size:14px;
color:#fff;
text-align: left;
padding-top:25px;
line-height:28px;
}
.screen-3__phone{
width:750px;
height:873px;
background:url("../img/screen-3-phone.png") no-repeat center top;
position:absolute;
right:0;
top:195px;
}
/*第四屏*/
.screen-4{
background-color:#ff0;
height:800px;
position:relative;

}

为什么第三屏screen-3__wrap的高度没有被phone撑开呢？