关于页脚的固定定位

<!doctype html>

<html>

<head>

<style>

* {margin:0;padding:0; font-size:180x; color:white;}

/* 方法一：给header设置fixed脱离文档流后，由于兄弟元素banner设置margin-top而导致毗邻元素边距一起下落（边距下落）的现象。解决方法是：给header设置top值固定它的位置*/

.header {width:1200px; height:50px; background:#333; text-align:center; line-height:50px; position:fixed; left:50%; margin-left:-600px; top:0;}

/* 方法2：给header设置fixed脱离文档流后，由于兄弟元素banner设置margin-top而导致毗邻元素边距一起下落（边距下落）的现象。解决方法是：给header设置top值固定它的位置*/

/* 方法2：给header设置fixed脱离文档流后，给banner添加padding-top等于上面元素高度，撑开下面的banner*/

.banner {width:1200px; height:100px; background:#666; margin:0 auto; text-align:center; padding-top:50px; line-height:100px;}

.content {width:1200px; height:2000px; background:#00ee00; margin:0 auto; text-align:center; line-height:3980px; padding-bottom:100px;}

.footer {width:1200px; height:100px; background:#000000; text-align:center; position:fixed; bottom:0; left:0; right:0;margin:0 auto; }

</style>

</head>

<body>

<div class="header">这个是页头</div>

<div class="banner">这个是banner</div>

</body>

</html>

老师，我的footer设置了fixed后，遮盖了content的下面位置。在这里我是不是只能用padding-bottom给content加下内边距。还有footer如果不加bottom：0的时候整个视窗都找不到它，请问它去哪了？

源自：CSS网页布局基础 2-5 经典的行布局（2）

收起

1回答

好帮手慕言 2020-06-29 09:54:42

同学你好，关于同学的疑问，解答如下：
1、也可以给类名为content的元素设置margin-bottom值。

2、可以按f12查看，例如：

提示在页面的下方，一般情况下，设置定位之后要配合偏移值，才能准确的控制元素的位置。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

天才守门员 #1

请问老师，给 footer设置了position:fixed的时候，在设置bottom:0，那么bottom:0起了什么作用呢

2022-06-26 10:35:44
好帮手慕慕子回复天才守门员 #2

同学你好， footer设置固定定位后，参考窗口进行定位，设置的bottom:0;作用就是让footer在窗口底部显示。
祝学习愉快~

2022-06-26 11:05:50