移动端实战em,rem实战发现的问题

  先直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0;padding: 0;}
.header,.content,.footer{display: block;}
/* html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
height: 100%;
overflow: auto;
}*/    /*方法1*/

/*

body{
position: relative;
}/*方法2*/

*/
.header{
width: 100%;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 0;
}
.content{
height: 2000px;
}
.footer{
width: 100%;
height: 100px;
background: pink;
position: absolute;
bottom:0;
left: 0;
}

</style>
</head>
<body>
<div class="header">头部</div>
<div class="content">内容</div>
<div class="footer">底部</div>
</body>
</html>

 

 

这样子的话,往下拉的时候底部的其实是定在中间的

解决的方法有方法1和方法2   其实还有更多的方法解决的

 

posted @ 2017-05-24 20:38  傑-要做个踏实的杰  阅读(128)  评论(0)    收藏  举报