html - 宽度固定为 100% 的位置忽略了 body 填充

我正在尝试制作一个页脚，该页脚跨越页面宽度的左侧和右侧减去 10px。我试图通过在 10px 的所有边上给 body 一个填充来做到这一点。在下面的代码中，页眉工作得很好，但页脚忽略了右侧的正文填充。为什么会这样，我该如何解决？

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                padding:0;
                margin:0;
            }
            body {
                margin: 0;
                padding: 0 10px;
            }
            #header {
                height: 150px;
                width: 100%;
                margin: 0 auto;
                background: #333;
            }
            #footer {
                position: fixed;
                bottom: 5px;
                width: 100%;
                background: #f63;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="header"></div>
        <div id="footer">I am the footer!</div>
    </body>
</html>

最佳答案

你的页脚没有忽略 body padding，通过控制台查看那个元素大小，你会看到你的页脚宽度是窗口宽度的 100% + 左填充 10px + 右填充 10px。

您可以在 css 中使用 calc 函数:https://developer.mozilla.org/en-US/docs/Web/CSS/calc