相对宽度和固定宽度百分比之间的差异

i have a page where i have two div elements with different relative and fixed positioning.

我有一个页面，其中有两个不同相对位置和固定位置的div元素。

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

and css is

和css是

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

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

But the problem is that the actual width of both the div elements is different. i have given width as 50% to both element then why there is difference in width.please help.

但是问题是两个div元素的实际宽度不同。我给了两个元素50%的宽度为什么会有宽度的差异。请帮助。

6 个解决方案

#1

Your div .outer1 is taking width: 50% of its parent i.e. body. Whereas you div .outer2 is positioned fixed and therefore is removed form normal document flow and will position itself with respect to viewport.

你的div。outer1的宽度是它父类的50%也就是主体。而您的div .outer2被定位为固定的，因此从正常的文档流中删除，并将自身定位到viewport。

Since every browser applies default 'user agent' stylesheet which includes default margin, paddings for elements therefore width of your document differs from that of viewport, that's why there is slight difference in the widths.

由于每个浏览器都使用默认的“用户代理”样式表，其中包含默认的空白，因此文档的宽度与viewport的宽度不同，因此宽度略有不同。

You can reset default browser styles, to get the desired result.

您可以重置默认的浏览器样式，以得到想要的结果。

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

#2

When you use Position:fixed the the div takes whole container (i.e. body) as a reference.

使用位置:固定时，div以整个容器(即主体)作为参考。

A fixed position element is positioned relative to the viewport, or the browser window itself.

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

In this case width of your screen is taken.Including the Extra default Margin of Body.

在这种情况下，选择屏幕的宽度。包括主体的额外默认范围。

And When you set Relative to any Element it means "relative to itself". The element doesn't care about any rules.

当你设置相对于任何元素时它的意思是相对于它自己。元素不关心任何规则。

That's why You are getting .outer div extra long.Because it is not following the rules of Body tag.

这就是为什么。outer div变长了。因为它不遵循Body tag的规则。

When You use margin:0 then you can see the effect both are same.

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

JSFIDDLE

#3

use css like this

使用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;
    }

#4

what-is-a-css-reset

what-is-a-css-reset

Used css reset or define your html, body margin:0;padding:0;

使用css重置或定义您的html, body margin:0;

Demo

演示

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>

#5

As stated by your the comments, this can be resolved by using a css reset or normalize or by simply resetting the body properties yourself.

如您的评论所述，可以通过使用css重置或规范化来解决这个问题，也可以通过自己重新设置body属性来解决。

body {
    margin: 0;
    padding: 0;
}

The reason this happened is because by default most browser have some margin applied to them.

发生这种情况的原因是，默认情况下，大多数浏览器都有一些空白。

As we know, position: fixed is not within the document flow and therefore is not affected by the margin of the body element.

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

So, really what you were seeing was actually correct. The element with position: fixed was 50% of the entire viewport, whilst the element with position: relative was 50% of the body element minus it's margin (which resulted in it being less wide).

所以，实际上你看到的是正确的。位置:fixed的元素占整个viewport的50%，而position: relative的元素是body元素的50%，减去它的边距(这导致它的宽度减少)。

#6

try this one:

试试这个:

    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;

        }

DEMO HERE

演示

#1