我需要将页脚固定在页面底部并居中。页脚的内容可能会随时更改，所以我不能通过 margin-left: xxpx; 将其居中。右边距：xxpx;
问题是由于某种原因这不起作用：
#whatever {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
我爬了网，一无所获。我尝试制作一个容器 div 和 nada。我尝试了其他组合和 gurnisht。我怎样才能做到这一点？
谢谢
你应该使用像这样的粘性页脚解决方案：
* {
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>
由 Daniel Kanis 修改代码：
只需更改 CSS 中的以下行
.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}
在 html 中：
<p class="enclose problem">
Your footer text here.
</p>
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 更容易。
问题出在
position: staticposition: 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中让绝对定位的元素居中？
我遇到了典型的
position: fixedbottom: 0position: sticky这是 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>我看到两个潜在的问题：
1 - IE 过去在 position:fixed 方面遇到过麻烦。如果您使用具有有效文档类型的 IE7+ 或非 IE 浏览器，这不是问题的一部分
2 - 如果您希望页脚对象居中，则需要为页脚指定宽度。否则它默认为页面的整个宽度，左右的自动边距设置为 0。如果您希望页脚栏占据宽度（如 StackOverflow 通知栏）并使文本居中，那么您需要在您的定义中添加“text-align: center”。
我已经将“问题 div 封装在另一个 div 中”让我们称这个 div 为 enclose 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>
你去吧！
-超文本
基于@Michael 的评论：
有更好的方法来做到这一点。简单地创建身体 位置：相对和填充页脚的大小+空间 在你想要的内容和页脚之间。然后只需制作一个页脚div 绝对值和底部：0.
我去挖掘解释，归结为：
更多细节在http://css-tricks.com/absolute-positioning-inside-relative-positioning/
这里是一个使用 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 网格：一个具体的例子
对于仍在为此寻求解决方案的任何人，有一个非常简单的方法可以做到这一点：
.target-element {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
一个重要的考虑因素是，因为它粘在窗口的底部，所以它会隐藏在它后面滚动的内容。所以你要确保它有背景颜色。
此外，您还需要为父元素提供一些超出固定位置元素高度的底部填充。如果
.target-element