Question

我有一个页脚，我想使用bottom:0px附加到页面底部。但是，我还希望使用margin-left:auto;和margin-right:auto;来居中。实际上，这会将页脚粘贴到页面底部，同时保持页面垂直居中。

不幸的是，由于bottom:0px需要position:relative而margin-left:auto和margin-right:auto需要position:absolute，因此不能一起使用这些内容。

如何在不创建容器的情况下将这两个属性同时放在同一个div上？
如果不可能，那么获得这两个属性的干净方法是什么？

另外：我不想有固定的职位。

footer.css：

.footer
{
    /*background-color:blue;*/


    min-height:10px;
    width:940px;


    margin-top:5px;
    margin-left:auto; /* WILL ONLY WORK IF POSITION IS RELATIVE */
    margin-right:auto;
    padding:5px;

    display:block;

    border-top: 3px solid #CCCCCC;

    text-align: center;
    font-family:arial;
    color:gray;

    position: relative;

    bottom:0px; /* WILL ONLY WORK IF POSITION IS ABSOLUTE */
}

感谢。

Answer 1

更改将页脚粘贴到底部的方法。

此示例改编自CSS-Tricks

更新了居中的div

有一个小提琴 - Fiddle Link!

HTML

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  <div id="centered">I'm centered!</div>
</footer>

CSS

/* From CSS Reset */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
} 
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}
#centered {
    margin: 0 auto;
    width: 550px;
    background: #F00;
}

Answer 2

由于页脚的宽度已固定，因此您可以使用此解决方案：

float:left;
min-height:10px;
width:940px;
position: absolute;
left:50%;
bottom:0px; 
margin-left:-470px;

请参阅：http://jsfiddle.net/vY9UJ/

Answer 3

页脚前面可能包含float="left"或float="right"的元素。所以添加空div和clear =＆＃34;两者都是＆＃34;在页脚之前，将margin-left:"auto"和margin-right:"auto"设置为页脚。

<div style="clear:both;"></div>
<footer> .... </footer>

Answer 4

正如我之前在评论中所建议的那样，将left和right设置为0将会成功 - 您的错误只是您已移除 {任何一方都有{1}}边距 - 这是必要的。

auto

http://jsfiddle.net/vY9UJ/1/

这没有.footer { min-height:10px; width:940px; padding:5px; position: absolute; left:0; right:0; bottom:0; margin:auto; background-color:#ff7575; }，否定 - left:50%“解决方案”的缺点 - 如果视口很小，页脚内容至少仍然可以通过滚动条访问。< / p>

如何从相对和绝对定位中获取属性

4 个答案: