Html 位置固定，边距和宽度100%错误

我有一个简单的div，

宽度：100%

和

位置：底部固定。
这是我的CSS：

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

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

我为您创建了一把小提琴：您可以使用底部：0；在下面的代码中，我还使用了填充而不是边距，填充将影响div中的“边距”，其中as margin指的是外部

#页脚{
宽度：100%；
边框：1px实心#000000；
位置：固定；
边际：0px；
底部：0px；
填充：0px 5px；
}

您可以使用bottom:0；在下面的代码中，我还使用了填充而不是边距，填充将影响div中的“边距”，其中as margin指的是外部

#页脚{
宽度：100%；
边框：1px实心#000000；
位置：固定；
边际：0px；
底部：0px；
填充：0px 5px；
}

您可以使用：


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

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

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

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

您可以使用：

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


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

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

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

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

我会做两件事：

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


设置框大小：边框框
。这将确保填充物不会影响元件的外部宽度

将html和body元素的边距和填充设置为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;
}

可以在这个中进行测试，我会做两件事：

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


设置框大小：边框框
。这将确保填充物不会影响元件的外部宽度

将html和body元素的边距和填充设置为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;
}

可以在此中进行测试，作为使用的替代方案（我认为这是一个很好的解决方案，尽管有），您可以包装元素：

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

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

除了使用边距，您还可以只添加
left:5px
/
right:5px


如果您想知道示例按原样运行的原因，那很简单，因为固定元素的位置是相对于视口的。因此，该元素的窗口宽度为
100%
，从而解释了
边距
没有按预期运行的原因。使用
calc（）
可以从宽度中减去边距。
作为使用的替代方法（我认为这是一个很好的解决方案，尽管存在以下问题），您可以包装元素：

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

除了使用边距，您还可以只添加
left:5px
/
right:5px


如果您想知道示例按原样运行的原因，那很简单，因为固定元素的位置是相对于视口的。因此，该元素的窗口宽度为
100%
，从而解释了
边距
没有按预期运行的原因。使用
calc（）
可以从宽度中减去边距。
我想要的是填充，而不是边距。而且，它看起来和我做的一模一样。仍然向右推：）您需要将正文设置为具有边距：0；-除此之外，页脚上的边距将其推向右侧。我要的是填充物，不是页边空白。而且，它看起来和我做的一模一样。仍然向右推：）您需要将正文设置为具有边距：0；-除此之外，页脚上的边距将其推向右侧。虽然看起来不错，但我认为它不会与旧浏览器一起工作，而且看起来像是一个黑客……我想知道是什么导致了这种100%忽略利润的奇怪行为width@j08691我想说的是有默认的边距，并用div和body标记填充，因为他给出了“边距：0 5px代码自然会设置左边距，这导致div向右推，以查看他只是必须将边距设置为0px。如果我错了，请更正我，我想问题是为什么要推页脚right@user3127499-OP想要在他的页脚上有5倍左右的空白-他不清楚为什么会有空白，他想要一个边距，让页脚占据整个宽度。啊哈…第二个解决方案就是这样！！不需要100%宽度…非常感谢（Y）我个人不喜欢
calc（）
方法（个人偏好？！）。但是我喜欢你的第二个建议！向上投票！虽然看起来不错，但我认为它不会与旧浏览器一起工作，而且看起来像是一个黑客……我想知道是什么导致了这种100%忽略利润的奇怪行为width@j08691我想说的是有默认的边距，并用div和body标记填充，因为他给出了“边距：0 5px代码自然会设置左边距，这导致div向右推，以查看他只是必须将边距设置为0px。如果我错了，请更正我，我想问题是为什么要推页脚right@user3127499-OP想要在他的页脚上有5倍左右的空白-他不清楚为什么会有空白，他想要一个边距，让页脚占据整个宽度。啊哈…第二个解决方案就是这样！！不需要100%宽度…非常感谢