请问老师，如何让页脚占位底部，且缩小页面时，不会发生偏移
我这里尝试过position：absolute bottom:0，发现缩小时，位置有问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <header> <div class="wrap clearfix"> <div id="logo"> 慕课高铁客服服务中心 | <span>客户服务</span> </div> <div id="nav"> 意见反馈 <span>imooc@com</span> 您好，请 <span>登录</span> | 注册 我的IMOOC <div id="navLists"></div> <div href="javascrip:;" id="telType">手机版</div> </div> </div> </header> <div id="main"> <div class="wrap"> <div id="content"> <div id="index">您现在的位置：<span>客运首页>注册</span></div> <div id="register"> <div id="title">账号信息</div> <div id="Msg"> <ul> <li> <span class='MsgType'><strong>*</strong> 用 户 名：</span> <input type="text" name="" placeholder="用户名设置成功后不可修改"> <span class="tip">6-30位字母、数字或"_"，字母开头</span> </li> <li> <span class='MsgType'><strong>*</strong> 登录密码：</span> <input type="password" name="" placeholder="6-20位字母、数字或符号"> <span class="tip"> <span id="easy" class="matchPIN"></span> <span id="normal" class="matchPIN"></span> <span id="hard" class="matchPIN"></span> </span> </li> <li> <span class='MsgType'><strong>*</strong> 确认密码：</span> <input type="password" name="" placeholder="再次输入您的登录密码"> <span class="tip"><u>姓名填写规则</u></span> </li> <li> <span class='MsgType'><strong>*</strong> 姓  名：</span> <input type="text" name="" placeholder="请输入姓名"> <span class="tip"></span> </li> <li> <span class='MsgType'><strong>*</strong> 证件类型：</span> <select> <option selected="selected">请选择</option> <option>二代身份证</option> </select> <span class="tip"></span> </li> <li> <span class='MsgType'><strong>*</strong> 证件号码：</span> <input type="text" name="" placeholder="请输入您的证件号码"> <span class="tip"></span> </li> <li> <span class='MsgType'>邮   箱：</span> <input type="text" name="" placeholder="请正确填写邮箱地址"> <span class="tip"></span> </li> <li> <span class='MsgType'><strong>*</strong> 手机号码：</span> <input type="text" name="" placeholder="请输入您的手机号码"> <span class="tip">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span> </li> <li> <span class='MsgType'><strong>*</strong> 旅客类型：</span> <select> <option selected="selected">请选择</option> <option>成人</option> </select> <span class="tip"></span> </li> </ul> <div id="agreeCheck"> <input type="checkbox" name="">我已阅读并同意遵守<span>《中国铁路客户服务中心网站服务条款》</span> </div> </div> <div id="nextStep">下一步</div> </div> </div> </div> </div> <footer> <div class="wrap"> <div id="footerCopy"> 关于我们 | 网站声明</br> Copyright © 2017 imooc.com All Right Roserved | 京ICP备 13046642号-2 </div> </div> </footer> </body> </html>
body,p{
margin: 0;
padding: 0;
font-family: Microsoft YaHei;
}
a{
text-decoration: none;
color: #000;
}
li{
list-style-type: none;
}
.wrap{
width: 1260px;
margin: 0 auto;
}
.clearfix{
zoom:1;
}
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/*头部*/
header{
width: 100%;
min-width: 1260px;
height: 110px;
background-color: #efefef;
}
header:after,footer:before{
content: "";
display: block;
height: 2px;
background-color: #2487c9;
}
header #logo{
height: 110px;
line-height: 110px;
float: left;
font-size: 24px;
background: url('../img/logo.png') left center no-repeat;
padding-left: 110px;
}
header #logo span{
color: #666;
}
header #nav{
height: 110px;
line-height: 110px;
float: right;
font-size: 18px;
}
header #nav #navLists{
display: inline-block;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
margin-left: 10px;
}
header #nav #telType{
display: inline-block;
background: url('../img/tel.png') left center no-repeat ;
background-size: auto 18px;
padding-left: 18px;
margin:0px 45px;
}
header #nav span{
color: #fb7403;
}
/*主体*/
#main{
width: 100%;
min-width: 1260px;
}
#main #content #index{
font-size: 18px;
line-height: 46px;
}
#main #content #index span{
color: #636363;
}
#main #content #register{
width: 100%;
height: 620px;
border: 1px solid rgb(251,116,3);
border-radius: 5px
}
#main #content #register #title{
height: 42px;
line-height: 42px;
font-size: 18px;
color: #fff;
background-color: rgb(251,116,3);
border-radius: 5px;
padding-left: 16px;
}
#main #content #register #Msg ul{
width: 750px;
margin: 30px auto 0px;
}
#main #content #register #Msg ul .tip{
color: rgb(251,116,3);
}
#main #content #register #Msg ul li{
line-height: 40px;
}
#main #content #register #Msg #agreeCheck{
text-align: center;
}
#main #content #register #Msg .MsgType{
display: inline-block;
width: 110px;
text-align: right;
}
#main #content #register #Msg .MsgType strong{
color: #ff96b7;
font-weight: normal;
}
#main #content #register #Msg select{
width: 173px;
height: 21px;
}
#main #content #register #nextStep{
width: 231px;
height: 37px;
line-height: 37px;
border-radius: 5px;
background-color:rgb(251,116,3);
color: #fff;
font-size: 16px;
margin: 64px auto;
outline: none;
text-align: center;
}
/*页脚*/
footer{
position: absolute;
bottom: 0;
width: 100%;
min-width: 1260px;
height: 100px;
background-color: #dcdcdc;
}
footer #footerCopy{
color: #999;
text-align: center;
font-size: 16px;
line-height: 32px;
margin-top: 16px;
}20
收起
正在回答 回答被采纳积分+1
4回答
相似问题
为什么遮罩会随着页面的缩小而变小 怎么处理呢
15
0
7
如果主体内容少的话，页脚不是会在中间的吗？
0
0
3
关于float和position在页面缩放时候的影响
15
0
3
老师为什么我给底部设置了绝对定位它还是不在底部
0
0
3
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星