80

我需要将页脚固定在页面底部并使其居中。页脚的内容可能随时发生变化，所以我不能只通过 margin-left: xxpx; 将其居中。右边距：xxpx；

问题是由于某种原因这不起作用：

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

我爬了网，一无所获。我尝试制作一个容器 div 和 nada。我尝试了其他组合和gurnisht。我怎样才能做到这一点？

谢谢

4

9 回答 9

53

您应该使用粘性页脚解决方案，例如这个：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

还有其他这样的;

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

使用 html：

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>
于 2009-06-09T16:26:31.383 回答
46

Daniel Kanis修改的代码：

只需在 CSS 中更改以下行

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

在html中：

<p class="enclose problem">
Your footer text here.
</p>
于 2013-08-23T05:05:41.770 回答
26

一个 jQuery 解决方案

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

有时实现 JS 比破解旧的 CSS 更容易。

http://jsfiddle.net/gLhEZ/

于 2011-10-26T00:25:09.397 回答
7

问题在于position: static。静态意味着不对该位置做任何事情。position: absolute是你想要的。但是，将元素居中仍然很棘手。以下应该有效：

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

或者

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

但我推荐第一种方法。我从这个答案中使用了居中技术： 如何在 div 中将绝对定位的元素居中？

于 2016-07-11T15:27:13.043 回答
3

我看到了两个潜在的问题：

1 - IE 在 position:fixed 方面遇到了问题。如果您使用的是带有有效文档类型的 IE7+ 或非 IE 浏览器，这不是问题的一部分

2 - 如果您希望页脚对象居中，则需要指定页脚的宽度。否则，它默认为页面的整个宽度，并且左右的自动边距设置为 0。如果您希望页脚栏占据宽度（如 StackOverflow 通知栏）并使文本居中，那么您需要将“文本对齐：中心”添加到您的定义中。

于 2009-06-09T16:48:29.667 回答
3

我已经将“问题 div 包含在另一个 div 中”让我们将此 div 称为封闭 div...使 css 中的封闭 div 的宽度为 100%，并且位置固定为 0...然后将问题 div 插入封闭的 div 这就是它的外观

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

然后在html中...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

给你！
-超文本

于 2013-08-02T03:49:01.570 回答
3

我遇到了一个典型的问题position: fixed并且bottom: 0不起作用。发现了一个简洁的功能position: sticky。请注意，它是“相对”新的，因此它不会与 IE/Edge 15 及更早版本一起使用。

这是 w3schools 的示例。

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>

于 2020-08-07T03:29:39.570 回答
1

根据@Michael 的评论：

有更好的方法来做到这一点。只需使用 position:relative 和填充页脚大小 + 内容和页脚之间的空间来创建正文。然后只需使用绝对值和底部：0 创建一个页脚 div。

我去挖掘解释，它归结为：

  • 默认情况下，bottom:0px 的绝对位置将其设置为窗口底部……而不是页面底部。
  • 相对定位一个元素会重置其子元素的绝对位置范围......所以通过将 body 设置为相对定位，bottom:0px 的绝对位置现在真正反映了页面的底部。

更多详情请访问http://css-tricks.com/absolute-positioning-inside-relative-positioning/

于 2014-01-30T22:39:01.080 回答
0

这是一个使用 css 网格的示例。

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

你可以使用 css 网格：一个具体的例子

于 2018-01-08T21:36:02.740 回答