footer with position：fixed not respnding to margin-right

问题描述：

所以我的问题是我有一个position:fixed的页脚，我有一个div封装了一切叫做边界的东西。通过边界，我设置了边距，右边和左边为200px，这对右侧页脚有效。footer with position：fixed not respnding to margin-right

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>

什么是HTML？可以创建片段？是的。保证金不会影响你给父母div的固定股利。 – ketan

固定位置将元素附加到文档，而不是父元素。因此，您的固定div将被定位为相对于'

'标签，而不是您的'＃frontier' div。但是，您需要共享HTML以查看您的问题。 –

我已经添加了使用导航的HTML，这是否重要？ – user3676224

答

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

不过我想你真正想要做的是添加填充到您的页脚（左侧和右侧都留下200像素），然后就可以直接应用到您的固定元素。请注意，如果填充效果需要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; 
}

编辑，连接小提琴显示什么，我认为你正在努力实现：https://jsfiddle.net/mtjkp2fv/1/

第一种选择是我需要的，但没有奏效。 – user3676224

@ user3676224你是什么意思，它不工作？它工作得很好：https://jsfiddle.net/0c8otw8q/ – reinder

我需要它从左侧和右侧缩进，目前它只是做正确的。 – user3676224

答

因为position:fixed容器从文档的正常流动，删除了此将无法正常工作。相反，您应该为您的fixed元素添加边距。

像添加margin-right：200px到我的页脚css？ – user3676224

footer with position：fixed not respnding to margin-right

相关推荐