相对宽度和固定宽度的百分比宽度之间的区别

Question

我有一个页面，在该页面上我有两个不同相对和固定定位的div元素。

<div class="outer1">
</div>
<div class="outer2">
</div>

而CSS则是

 .outer1{
    width:50%;
    height:500px;
    background:red;
    position:relative;
    }

    .outer2{
    width:50%;
    background:blue;
    height:200px;
    position:fixed;
    }

但问题在于两个div元素的实际宽度不同。我已经给了两个元素50%的宽度，为什么宽度会有差异，请帮忙解决。

- gkarya42

---

你需要这个链接：https://jsfiddle.net/t5qxs4b7/ - Ivin Raj

使用CSS重置或HTML、body{margin:0; padding:0;}。例如，请查看此演示 https://jsfiddle.net/t5qxs4b7/1/。 - Rohit Azad Malik

Answer 1

你的 .outer1 div 具有 width: 50% 的属性，是其父元素即 body 的一半宽度。而你的 .outer2 div 具有 fixed 属性，因此从normal document flow中移除，并将自身相对于视口定位。

由于每个浏览器都应用默认的“用户代理”样式表，其中包括元素的默认边距和填充，因此文档的宽度与视口的宽度不同，这就是宽度上存在轻微差异的原因。

你可以重置默认的浏览器样式以获得所需的结果。

html, body {
  margin: 0;
  padding: 0;
}

- abhishekkannojia

Answer 2

当你使用Position:fixed时，div将整个容器（即body）作为参考。

固定位置元素相对于视口或浏览器窗口本身定位。

在这种情况下，宽度是您屏幕的宽度，包括Body的额外默认边距。

而当你设置相对于任何元素的相对位置时，意味着“相对于自身”。 该元素不关心任何规则。

这就是为什么你得到了一个额外长的.outer div。因为它没有遵循Body标签的规则。

当你使用margin:0时，你可以看到两个效果是一样的。 JSFIDDLE

- Rahul

Answer 3

像这样使用CSS

body{
    margin:0;
    padding:0;
  }
.outer1{
    width:50%;
    height:500px;
    background:red;
    position:relative;
    float:left;
    }
.outer2{
    width:50%;
    background:blue;
    height:200px;
    position:fixed;
    }

- Dasrath

Answer 4

根据您的评论，这可以通过使用CSS reset 或 normalize 或仅重置body properties yourself 来解决。

body {
    margin: 0;
    padding: 0;
}

这种情况发生的原因是因为默认情况下，大多数浏览器都对它们应用了一些 margin边距。

我们知道，position: fixed 不在文档流中，因此不受 body 元素的 margin 影响。

所以，实际上你看到的是正确的。具有 position: fixed 的元素占整个视口的 50%，而具有 position: relative 的元素占 body 元素减去其 margin 的 50%（导致它变得不够宽）。

- justinw

Answer 5

什么是CSS重置

使用CSS 重置样式表 或定义html，body margin:0;padding:0;

演示

html, body
    {
     margin:0; 
      padding:0;
    } 
    .outer1{
        width:50%;
        height:500px;
        background:red;
        position:relative;
        float:left;
        }

        .outer2{
        width:50%;
        background:blue;
        height:200px;
        position:fixed;

        }

<div class="outer1"></div>
<div class="outer2"></div>

- Rohit Azad Malik

Answer 6

试试这个：

    body
    {
     margin:0; 
      padding:0;
    } 
    .outer1{
        width:50%;
        height:500px;
        background:red;
        position:relative;
        float:left;
        }

        .outer2{
        width:50%;
        background:blue;
        height:200px;
        position:fixed;

        }

这里演示

- Ivin Raj