绝对元素宽度100％忽略填充内容框

Question

我在相对容器中有一个绝对元素。绝对元素的width:100%给出了相对容器元素的宽度。

我的目标是让绝对元素延伸到容器的100％以上，从右和左延伸40px。

我想通过在pading left & right to 40px上设置box-sizing: content-box;以及{{1}}来实现。问题是绝对元素不会拉伸到相对容器的100％。相反，它仅在内容空间内伸展而不包括填充。

修改 事实证明这只是在Chrome中。

Answer 1

只需添加width:132%;和left:0px;

即可

fiddle

Answer 2

你需要在这里使用jQuery来计算带有填充的DIV的宽度。基本上我们需要将DIV的outerWidth()应用到表格中 -

演示 - http://jsfiddle.net/GDU7Q/

希望这有帮助！

Answer 3

如果你将每个边的填充设置为40px，它想要相信绝对div的开始是从你的相对div的左边开始，你需要设置一个负边距

<div class="outer">
    <div class="inner">
    </div>
</div>

.outer {
    position:relative;
}

.inner {
    position:absolute;
    width:100%;
    padding:0 40px;
    margin-left:-40px;
}

fiddle