Html 带位置的页脚：固定不响应右边距

所以我的问题是，我有一个带有

位置的页脚：fixed

，还有一个div，它封装了所有称为frontier的东西。通过frontier，我将右边和左边的边距设置为

200px

，除了右边的页脚外，它还能工作

边线和页脚样式的Css：

#frontier
{
 margin-right:200px;
 margin-left:200px;
}


.footer
{
background-color: #000000;
position:fixed;
bottom:0;
width:100%;
height:100px;   /* Height of the footer */
opacity: 0.7;
text-align: center;

-webkit-box-shadow: -6px -8px 6px -6px #999;
-moz-box-shadow: -6px -8px 6px -6px #999;
box-shadow: -6px -8px 6px -6px #999;
}

我尝试了一些建议，但仍然无法让页脚做出回应。我觉得这将是一个问题，任何我加上一个固定的位置。有什么解决办法吗？谢谢

HTML

:
:

这将不起作用，因为带有

位置：fixed

的容器将从文档的正常流中删除。您应该将边距添加到

fixed

元素中。

这不起作用，因为带有

位置：fixed

的容器将从文档的正常流中删除。您应该在

fixed

元素中添加边距。

我认为您还没有完全理解“position:fixed”。“位置固定”始终相对于视口。因此，100%始终是视口的100%，而不是封装元素的100%

前面的答案建议将边距添加到固定元素中，而固定元素也不会起作用。您需要做的是在固定元素中添加一个div，并在该元素上应用边距

例如：

<div class="footer">
   <div class="content">
       footer
   </div>
</div>

.footer
{
    background-color: #000000;
    position:fixed;
    bottom:0;
    width:100%;
    height:100px;
}

.content
{
    margin: 0 20px;
}

页脚
.页脚
{
背景色：#000000；
位置：固定；
底部：0；
宽度：100%；
高度：100px；
}
.内容
{
利润率：0.20px；
}

然而，我认为您实际上想要做的是在页脚中添加一个填充（在左侧和右侧都保留200px），然后您可以将其直接应用于固定元素。请注意，要使填充物在100%宽度下正常工作，您需要框大小：边框框

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

.footer
{
    background-color: #000000;
    position:fixed;
    bottom:0;
    width:100%;
    height:100px;
    padding:0 200px;
    box-sizing: border-box;
}

页脚
.页脚
{
背景色：#000000；
位置：固定；
底部：0；
宽度：100%；
高度：100px；
填充：0 200px；
框大小：边框框；
}

---

编辑，并附上一把小提琴，以显示我认为您正在努力实现的目标：

我认为您还没有完全理解“位置：已修复”。“位置固定”始终相对于视口。因此，100%始终是视口的100%，而不是封装元素的100%

前面的答案建议将边距添加到固定元素中，而固定元素也不会起作用。您需要做的是在固定元素中添加一个div，并在该元素上应用边距

例如：

<div class="footer">
   <div class="content">
       footer
   </div>
</div>

.footer
{
    background-color: #000000;
    position:fixed;
    bottom:0;
    width:100%;
    height:100px;
}

.content
{
    margin: 0 20px;
}

页脚
.页脚
{
背景色：#000000；
位置：固定；
底部：0；
宽度：100%；
高度：100px；
}
.内容
{
利润率：0.20px；
}

然而，我认为您实际上想要做的是在页脚中添加一个填充（在左侧和右侧都保留200px），然后您可以将其直接应用于固定元素。请注意，要使填充物在100%宽度下正常工作，您需要框大小：边框框

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

.footer
{
    background-color: #000000;
    position:fixed;
    bottom:0;
    width:100%;
    height:100px;
    padding:0 200px;
    box-sizing: border-box;
}

页脚
.页脚
{
背景色：#000000；
位置：固定；
底部：0；
宽度：100%；
高度：100px；
填充：0 200px；
框大小：边框框；
}

---

编辑，附加一个提琴来显示我认为您正在努力实现的目标：

什么是html？可以创建代码段吗？是的。边距不会影响您提供父div的固定div。固定定位将元素附加到文档，而不是父元素。因此，您的固定div将相对于

标记定位，而不是相对于

#frontier

div。但是，您需要共享HTML以准确查看您的问题。我添加了我使用nav制作的HTML，这有关系吗？您需要共享自#frontier div以来的所有HTML什么是HTML？可以创建代码段吗？是的。边距不会影响您提供父div的固定div。固定定位将元素附加到文档，而不是父元素。因此，您的固定div将相对于

标记定位，而不是相对于

#frontier

div。但是，您需要共享HTML以准确查看您的问题。我添加了我使用nav制作的HTML，这有关系吗？您需要共享自#frontier以来的所有HTMLdiv@user3676224你说它不工作是什么意思？它工作得很好：我需要它从左边和右边都缩进，目前它只是做右边。这是我的网站，如果你可以看看，我需要调整页脚，以配合页眉的大小太多，我需要知道如何才能做到，以便把内容之间的页眉和页脚的固定位置太！！谢谢你的支持help@user3676224在.footer的声明中缺少“left:0”。同时将背景色（#000）应用于.content元素，而不是页脚，使其看起来像页眉。非常感谢，成功了！！！如果你不介意的话，我还有一个问题想问。顶部的“导航栏”有空白：nowrap；这会导致它在调整窗口大小时溢出内容。我尝试了同样的技巧，甚至删除了空白：nowrap；但是，它不会收缩导航条以适应该空间。你知道有什么办法可以解决这个问题吗？或者有什么建议？非常感谢你@用户3676224你说它不工作是什么意思？它工作得很好：我需要它从左边和右边都缩进，目前它只是做右边。这是我的网站，如果你可以看看，我需要调整页脚，以配合页眉的大小太多，我需要知道如何才能做到，以便把内容之间的页眉和页脚的固定位置太！！谢谢你的支持help@user3676224在.footer的声明中缺少“left:0”。同时将背景色（#000）应用于.content元素，而不是页脚，使其看起来像页眉。非常感谢，成功了！！！