html - 位置为 :fixed not respnding to margin-right 的页脚

Question

所以我的问题是我有一个带有 position:fixed 的页脚，我有一个 div 封装了所有称为 frontier 的东西。通过 frontier，我将 margin-right 和 left 设置为 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

<nav class='footer' onload='startTime()'>
   <h1 id='hours'></h>
   <h1> :</h1>
   <h1 id='minutes'></h1>
   <h1> :</h1>
   <h1 id='seconds'></h1>
</nav>

Answer 1

我认为您还没有完全理解“position: fixed”。固定位置始终相对于视口(viewport)。因此，100% 将始终是视口(viewport)的 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;
}

不过，我想您真正想要做的是向页脚添加一个内边距(在左侧和右侧各留出 200 像素)，然后您可以将其直接应用于固定元素。请注意，要使填充在 100% 宽度下正常工作，您需要调整 box-sizing: border-box;

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

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

编辑，附上一个 fiddle 来展示我认为你正在努力实现的目标:https://jsfiddle.net/mtjkp2fv/1/