请问老师，如何让页脚占位底部，且缩小页面时，不会发生偏移

请问老师，如何让页脚占位底部，且缩小页面时，不会发生偏移

http://img1.sycdn.imooc.com//climg/5ee622960966b29819150921.jpg

我这里尝试过position：absolute  bottom:0，发现缩小时，位置有问题

http://img1.sycdn.imooc.com//climg/5ee622d3099f7f1206950614.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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">
慕课高铁客服服务中心&nbsp;|&nbsp;<span>客户服务</span>
</div>
<div id="nav">
意见反馈&nbsp;<span>imooc@com</span>&nbsp;&nbsp;您好，请&nbsp;<span>登录</span>&nbsp;|&nbsp;注册&nbsp;&nbsp;我的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>&nbsp;用&ensp;户&ensp;名：</span>
<input type="text" name="" placeholder="用户名设置成功后不可修改">&nbsp;
<span class="tip">6-30位字母、数字或"_"，字母开头</span>
</li>
<li>
<span class='MsgType'><strong>*</strong>&nbsp;登录密码：</span>
<input type="password" name="" placeholder="6-20位字母、数字或符号">&nbsp;
<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>&nbsp;确认密码：</span>
<input type="password" name="" placeholder="再次输入您的登录密码">&nbsp;
<span class="tip"><u>姓名填写规则</u></span>
</li>
<li>
<span class='MsgType'><strong>*</strong>&nbsp;姓&emsp;&emsp;名：</span>
<input type="text" name="" placeholder="请输入姓名">&nbsp;
<span class="tip"></span>
</li>
<li>
<span class='MsgType'><strong>*</strong>&nbsp;证件类型：</span>
<select>
<option selected="selected">请选择</option>
<option>二代身份证</option>
</select>&nbsp;
<span class="tip"></span>
</li>
<li>
<span class='MsgType'><strong>*</strong>&nbsp;证件号码：</span>
<input type="text" name="" placeholder="请输入您的证件号码">&nbsp;
<span class="tip"></span>
</li>
<li>
<span class='MsgType'>邮&emsp;&emsp;&ensp;箱：</span>
<input type="text" name="" placeholder="请正确填写邮箱地址">&nbsp;
<span class="tip"></span>
</li>
<li>
<span class='MsgType'><strong>*</strong>&nbsp;手机号码：</span>
<input type="text" name="" placeholder="请输入您的手机号码">&nbsp;
<span class="tip">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
</li>
<li>
<span class='MsgType'><strong>*</strong>&nbsp;旅客类型：</span>
<select>
<option selected="selected">请选择</option>
<option>成人</option>
</select>&nbsp;
<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">
关于我们&nbsp;|&nbsp;网站声明</br>
Copyright&nbsp;©&nbsp;2017&nbsp;imooc.com&nbsp;All&nbsp;Right&nbsp;Roserved&nbsp;|&nbsp;京ICP备&nbsp;13046642号-2
</div>
</div>
</footer>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
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;
}
学习plus 2020-06-14
源自：项目：JS表单验证案例   3-10 作业题
20
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

4回答
好帮手慕星星 2020-06-15 15:28:50

同学你好，作业中没有要求垂直方向上铺满页面，所以建议按照代码内容多少来显示，垂直方向有留白或者出现滚动条都是可以的。

祝学习愉快！

0
收起回答
好帮手慕星星 2020-06-15 09:50:22

同学你好，解决方式是可以的，但不是最佳方式。建议不设置定位，按照正常文档流排列在底部

http://img1.sycdn.imooc.com//climg/5ee6d38709d8621904750297.jpg

自己测试下，祝学习愉快！

0
收起回答
  • 提问者 学习plus #1
    不设置定位的话，比如1920*1080,margin-top设置的少，会出现界面底部留白，设置的多，会出现滚动条
    2020-06-15 14:18:24
提问者 学习plus 2020-06-14 21:41:01

还有一个问题，为什么有时候最大化，页面底部会有一条白边，一定要html、body的height属性设置为100%，才能消除掉哦

0
收起回答
  • 提问者 学习plus #1
    不对，得设置为 min-height:100vh。不然body就只有窗口那么点大了
    2020-06-14 21:51:49
提问者 学习plus 2020-06-14 21:26:10

啊。已经搞懂了，因为没给body添加position 属性，footer的定位相对于HTML，也就是窗口定位了，所以最小化时候，footer也跟着上去了

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么遮罩会随着页面的缩小而变小 怎么处理呢
15 0 7
如果主体内容少的话，页脚不是会在中间的吗？
0 0 3
关于float和position在页面缩放时候的影响
15 0 3
可行吗? 为什么左右两个块状元素需要设置高度才能垂直居中？不能由内容的高度决定吗
0 0 3
老师为什么我给底部设置了绝对定位它还是不在底部
0 0 3

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码