Question

我是以下的html和css：

<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％。

不知怎的，我不能让这个工作。我找到了解决方案，但他们都不使用固定位置。

Answer 1

这是一个可能的解决方案：

.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/

Answer 2

只需在你的css中进行以下更改。

＆＃13;

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

＆＃13;

JSFIDDLE

Answer 3

为什么不直接为所有4个边分配20px的位置偏移？

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

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

保证金在窗外移动div

3 个答案: