发表新帖
发表新帖

position: fixed caused element to be wider than browser

前端 未结
关注
6 2602
独厮守ぢ
独厮守ぢ 2021-02-20 13:04

Can anyone tell me why position:fixed cause the element to be wider than the browser or other content on the page and causing horizontal scrolling?

Here is the code HTML

相关标签:
6条回答
  • 醉酒成梦
    2021-02-20 13:47

    As Salaw mentioned, using body { margin: 0; } will solve the issue, since <body> has default margin/padding (depending on the browser). position: fixed; removes an element completely from the flow of the document and makes it relative only to the viewport, while position: relative; does not.

    Given this fact, and given that width: 90% means "make this element take up 90% of parent element's available space", and given that the parent of a fixed element is the viewport while the parent of this relative element is the body with its margin, you have the discrepancy in sizes.

    See http://codepen.io/anon/pen/exzpC

    0 讨论(0)
  • [愿得一人]
    2021-02-20 13:56

    It's because the width is differently applied to relative and fixed elements depending on the container margin and the style property that are parent-inheritable - respective to their position property such as (you guess right) width.

    Due to, if you don't use any CSS reset like this ugly fella *{margin:0; padding:0;}
    the body tag will have it's default 8px margins (http://www.w3.org/TR/CSS2/sample.html),

    header being fixed, without any top, left, right or bottom value will be positioned to the nearest available place -> but will inherit the original document/viewport size, making it REALLY 90% wide, just positioned at the 10px 'body' margin offset.

    To test add top:0; left:0; for the fixed header http://jsbin.com/ETAqADu/1/edit

    .container being a block level DIV element set to relative position, will be 90% width of the available parent usable width, which is the body innerWidth (not counting the 10 + 10px margins (X axis))

    Result: logically header will be 20px wider than .container because position fixed moves your element out of your body flow.

    Fix: logically, control your parent (body) element default margin by setting to 0

    0 讨论(0)
  • 野的像风
    2021-02-20 13:58

    By default the body tag have margin.
    Try this in your stylesheet:

    body{
  margin: 0;
}
    0 讨论(0)
  • 刺人心
    2021-02-20 14:01

    I was having a similar problem only on mobile. Despite having no margins, borders, padding on any of the parents, my fixed element was still wider than the viewport, and I didn't have the option of using width: auto.

    If you're willing to not support IE8 and below, you can use

    width: 100vw

    Can I use Viewport units: vw, vh, vmin, vmax

    0 讨论(0)
  • 后悔当初
    2021-02-20 14:06

    The accepted answer is fine but in my case, I was seeing a fixed header that was wider than the rest of the page only on a mobile device. It happened to be caused by some element in the footer that had a width in pixels wider (width: 750px in my case) than the viewport of the browser.

    If you want to know if some element on your page is causing this problem for you? Just open your browser console and remove some elements further down. At some point, you may notice the header becoming the correct width again. Chances are that the element you just removed or some element in it has a width in pixels wider than the viewport of the browser.

    The solution, in that case, is to either set that element to a lesser width or make it flexible.

    0 讨论(0)
  • 天涯浪人
    2021-02-20 14:07

    Because position:fixed behave as the element is detached from document, and placed in the nearest top/left corner of the document, adding default body's margin. That's why it will take the same amount of space, as your second div, if you reset body margin.

    0 讨论(0)
 看不清?
提交回复
热议问题