CSS绝对定位width100%超出容器问题？

Question

//html
body>footer
// css
body {
    position: relative;
    margin: 0 auto;
    max-height: 500px;
}
footer {
    position: fixed;
    width: 100%;
}

footer会超出body直到浏览器边缘，如何解决？
前提是不能直接设footer的宽度

Answer 1

fixed是相对于浏览器窗口进行定位，absolute才是相对于 static 定位以外的第一个父元素进行定位，所以改成absolute就可以了

Answer 2

首先 fixed是根据视窗来进行定位的，所以没有出现你想要的继承body的宽度情况出现。
不过根据你的代码来看你是做的移动端的页面，那footer应该是个菜单栏，需要固定在底部

解决思路：
1. js获取body实际宽度，然后再给footer赋值宽度。
2. body和footer都采用百分比布局或者flex布局。

Answer 3

把footer设置成position:absolute .......

Answer 4

* {
    margin:0;
    padding:0;
}

这个加上去，试一下

Answer 5

你至少给body一个宽度，width:100%呀

Answer 6

html，body｛width：100%｝

Answer 7

//html
body>footer
// css
body {

position: relative;
margin: 0 auto;
max-height: 500px;
width:100%;

}
footer {

position: fixed;
width: 100%;
padding:0;
margin:0;

}

Answer 8

原因： fixed固定布局是基于视窗的，跟父元素无关，因此会超出容器

解决： 只能设宽度了。保持fixed的情况下，要加上与body相同的max-width。考虑到要共用的问题，可以分为两种情况：不用预处理器，可以存为一个公共class，所有页面共用；用预处理器，就存为变量了，更简单。