Question

所以我的问题是我有一个position:fixed的页脚，我有一个div封装了所有名为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

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

Answer 1

我认为你完全不理解“立场：固定”。固定位置始终相对于视口。因此，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;
}

但是我想你真正想要做的是在你的页脚上添加一个填充（在左侧和右侧留下200px），然后你可以直接将它应用到你的固定元素。请注意，要使填充效果良好，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;
}

编辑，附上一个小提示，以显示我认为你想要实现的目标：https://jsfiddle.net/mtjkp2fv/1/

Answer 2

这不会起作用，因为带有position:fixed的容器会从文档的正常流程中删除。您应该为fixed元素添加边距。

有位置的页脚：固定不反转到右边距

2 个答案: