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>

來源

2016-02-26 user3676224

什麼是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/

來源

2016-02-26 10:52:48 reinder

第一種選擇是我需要的，但沒有奏效。 – user3676224

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

我需要它從左側和右側縮進，目前它只是做正確的。 – user3676224

因爲position:fixed容器從文檔的正常流動，刪除了此將無法正常工作。相反，您應該爲您的fixed元素添加邊距。

來源

2016-02-26 10:48:01 VladFr

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

footer with position：fixed not respnding to margin-right

回答

相關問題