Question

我有一个简单的div，width:100%和position:fixed到底。这是我的CSS：

#footer {
     width: 100%;
     border: 1px solid #000000;
     position:fixed;
     bottom: 0;
     margin:0 5px;
}

当我使用速记属性左右应用边距时，页脚被推向右边，这很奇怪。

我为你创造了一个小提琴：Fiddle Demo

Answer 1

您可以使用calc()：

<强> jsFiddle example

#footer {
    width: calc(100% - 12px);
    border: 1px solid #000000;
    position:fixed;
    margin:0 5px;
}
body {
    margin:0;
    padding:0;
}

计算中的12px来自每个边距的5px，加上左边界和右边界的1px。

或选项＃2 （不需要width或calc()）。只需将左侧和右侧设置为5px，页脚将拉伸整个宽度，减去这些数量：

#footer {
    border: 1px solid #000000;
    position:fixed;
    left:5px;
    right:5px;
}
body {
    margin:0;
    padding:0;
}

<强> jsFiddle example

Answer 2

我会做两件事：

设置box-sizing: border-box。这将确保填充不会影响元素的外部宽度。
为html和body元素设置margin和padding为0，因为在大多数浏览器中默认应用了边距。

您现在可以设置元素填充，而不是尝试使用边距值进行变通。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
#footer {
    width: 100%;
    border: 1px solid #000000;
    position:fixed;
    padding:0 5px;
}

可以在 JSFiddle

中进行测试

Answer 3

你可以使用bottom：0;在我下面的代码中，我也使用填充而不是边距，填充将影响边距＆＃39;在div内，保证金指的是外部。

#footer { width: 100%; border: 1px solid #000000; position: fixed; margin: 0px; bottom: 0px; padding: 0px 5px; }

http://jsfiddle.net/3w6xE/3/

Answer 4

作为使用calc()的替代方法，（我认为这是一个很好的解决方案，尽管有limited browser support），你可以包装元素：

<div class="footer_wrapper">
    <div class="footer">test</div>
</div>

父，包装器元素的宽度为100%，子.footer元素具有边距。正如其他人所提到的，使用box-sizing:border-box以便在元素的宽度计算中包含边框。可以查看对{{1}}的支持{/ 3}}。

here

box-sizing

作为使用保证金的替代方法，您还可以添加.footer_wrapper { width: 100%; position:fixed; } .footer_wrapper > .footer { border:1px solid #000; margin:0 5px; box-sizing:border-box; } / left:5px。

如果你想了解你的例子为什么表现的原因，那只是因为固定元素的位置是相对于视口的。因此，该元素的宽度为right:5px，因此解释了100%未按预期运行的原因。使用margin可以从宽度中减去边距。

位置固定为边距和宽度100％错误

4 个答案: