保證金移動div的外窗

我以下HTML和CSS：保證金移動div的外窗

<div class="foo"></div> 

<style> 
.foo { 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: red; 
    width: 100%; 
    height: 100%; 
    margin: 20px 
} 
</style>

jsfiddle

問題是margin: 20px。它將整個div移到右邊和底部，並在窗外。我希望它可以減小div的寬度，使整個元素佔用窗口寬度的100％。

不知何故，我不能得到這個工作。我找到了解決方案，但他們都沒有使用固定位置。

來源

2015-06-11 Stefan

添加填充到位保證金 – nikhil

什麼是你想用保證金做的：20px的？我不明白最終目標，它完全按照你的定義來解決？指定您想要的保證金類型？ –

我希望背景在邊緣區域可見。 – Stefan

這是一個可能的解決方案：

.foo { 
    width: calc(100% - 40px); 
    height: calc(100% - 40px); 
}

DEMO：https://jsfiddle.net/lmgonzalves/a6nbvmp4/1/

編輯：

另一種可能的解決方案，而calc，但與box-shadow：

.foo { 
    box-shadow: 0 0 0 20px white inset; 
}

DEMO：https://jsfiddle.net/lmgonzalves/a6nbvmp4/6/

來源

2015-06-11 20:01:59 lmgonzalves

這個calc是否支持舊瀏覽器？ – Stefan

這是不是Android的股票瀏覽器支持，我知道:( –

支持IE9 +和所有現代瀏覽器。不是Android :(https://developer.mozilla.org/es/docs/Web/CSS/calc – lmgonzalves

只需在您的CSS中進行以下更改。

.foo { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom:0; 
 
    background-color: red; 
 
    margin: 20px; 
 
}

JSFIDDLE

來源

2015-06-11 20:04:22

這裏的問題似乎仍然在底部 – Stefan

請檢查更新的JSFIDDLE http://jsfiddle.net/avijitkr/a6nbvmp4/5/ –

爲什麼downvote？這似乎是完美的我 – Stefan

爲什麼不直接指定位置的20像素偏移到所有4個方面？

.foo { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    bottom: 20px; 
    left: 20px; 
    background-color: red; 
}

http://jsfiddle.net/brimwd/72rbgr85/

來源

2015-06-11 20:12:01

保證金移動div的外窗

回答

相關問題