如何强制使用100%宽度的绝对位置以适合带填充的父div？

Question

我有2个div,一个外部div,它是父级和子级div.外部div是位置相对,左侧和右侧的填充为20px,而子级为绝对位置,宽度为100%.如何强制绝对位置的子进程在父级内,即尊重填充20px(父级内部和20px填充内)

我在这里做了一个例子:http://www.bootply.com/nyGZzTVY8v

我读过有关盒子大小的内容,但我仍然不明白如何正确实现它.尝试把它放在box1类上,什么也没发生,尝试穿上box2类,也没有发生任何事情.

提前致谢.

附加说明:它必须是响应,即我不知道父div的大小,因此孩子div的100%.

Answer 1

只需设置left: 20px;和right: 20px;和移除width: 100%

现场演示

.box2 {
    position: absolute;
    padding: 50px 0;
    color: #000;
    background: #fff;
    left: 20px;
    right: 20px;
    border: solid thin #06F;
}

或添加left: 20px;和calc函数 width: calc( 100% - 40px )

.box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
left: 20px;
border: solid thin #06F;
}

现场演示

Answer 2

如果必须响应，您可以添加填充作为边距，然后使用 calc 作为宽度：

.box2 {
    position: absolute;
    width: calc(100% - 40px);
    left: 0px;
    padding: 50px 0;
    margin: 0 20px;
    colour: #000;
    background: #fff;
    border: solid thin #06F;
}