绝对元素宽度100％忽略填充内容框 [英] Absolute element width 100% ignoring padding content-box

问题描述

我在一个相对容器中有一个绝对元素。绝对元素有 width：100％，它给出了相对容器元素的宽度。

I have an absolute element inside a relative container. The absolute element has its width:100% which gives the width of the relative container element.

我的目标是绝对元素超出容器的100％，从左到右40像素。

My goal is for the absolute element to stretch beyond the 100% of the container, 40px from right and left.

这是我想通过设置 pading left&右边到40px ，以及 box-sizing：content-box; 。问题是绝对元素不会拉伸到相对容器的100％。相反，它仅在内容空间内延伸，而不包括填充。

This I am trying to achieve by setting pading left & right to 40px on the relative container, together with box-sizing: content-box;. The problem is that the absolute element doesn't stretch to 100% of the relative container. Instead it stretches only within the content space without including the padding.

编辑
证明这只能在Chrome中使用。

Edit Turns out that this is only in Chrome.

推荐答案

您需要在这里使用jQuery来计算DIV的宽度与paddings。基本上，我们需要将DIV的 outerWidth（）应用到表 -

You need to use jQuery here to calculate the width of DIV with paddings. Basically we need to apply the .outerWidth() of DIV to the table -

Demo - http://jsfiddle.net/GDU7Q/

Demo - http://jsfiddle.net/GDU7Q/

希望这有助于！

这篇关于绝对元素宽度100％忽略填充内容框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！