我需要我的页脚固定在页面底部并居中.页脚的内容可能随时都会改变,所以我不能只通过左页边距:xxpx;右页边距:xxpx来居中.

问题是,出于某种原因,这不起作用:

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

我在网上搜索,什么也没找到.我试着做了一个容器div,但一无所获.我试过其他的组合和枪.我怎么才能做到这一点呢?

谢谢

推荐答案

您应该使用粘性页脚解决方案,如下所示:

* {
    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>

Css相关问答推荐

基于子元素的子元素数量的样式元素

将照片向下对齐至div并保持响应性

我应该在哪里放置expo /Reaction本地项目的CSS重置文件?

CSS子网格不显示行间距

在GRID-TEMPLATE-ROWS中设置最大行数:Repeat()

如何使用Bootstrap在切换按钮旁边的手风琴标题中添加链接?

是否可以在元素之间对齐渐变?

Firefox未正确设置SVG的父div的宽度

弹性布局溢出时的换行符

如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

在 SVG 元素上方添加标签而不移动 SVG 元素

CSS 在具有多个背景图像的元素上过滤一个背景图像

CSS网格列随着长内容改变大小

CSS如何防止键盘向上移动内容?

如何在 Chrome 中模拟偏好 colored颜色 方案媒体查询?

使用 CSS3 生成重复的六边形图案

iPhone X / 8 / 8 Plus CSS 媒体查询

Highcharts 图表选项 backgroundColor:'transparent' 在 IE 8 上显示黑色

Bootstrap 3 Glyphicons CDN

如何在页面上居中 twitter bootstrap 选项卡?