<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<title></title>
<!--
需求：
有一块内容<main>,
当内容短时<foote>粘在屏幕底部,
内容很长时紧跟在main后.
-->
<style type="text/css">
html,body{
height:100%;
}
.wrap{
min-height: 100%;/*从html,body依次继承视口的高度.让wrap沾满视口高度*/
padding-bottom: 50px;/*padding只绘制背景，不让main文字内容与footer重叠*/
text-align: center;
background-color: #FFC0CB;
overflow: hidden;/*移动端清除浮动常用方法*/
}
.footer{
height:50px;
text-align: center;
line-height:50px;
background-color: #FF0000;
margin-top:-50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<p>main</p>
<p>main</p>
<p>main</p>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
