如何强制位置绝对与100％宽度适合父div与填充？ [英] How to force position absolute with 100% width to fit into parent div with padding?

问题描述

我有2个div，一个外部div是一个父和一个孩子div。外部div是位置亲戚，填充20px左右，而孩子是位置绝对与100％widthg。我如何强制位置绝对的孩子在父，即尊重填充20px（在父内部和20px填充内）

I have 2 divs, an outer div which is a parent and a child div. The outer div is position relatives with padding 20px for left and right while the child is position absolute with 100% widthg. How can I force the child which is position absolute to be within the parent, ie respecting the padding 20px (inside parent and within the 20px padding)

我做了示例如下： http://www.bootply.com/nyGZzTVY8v

我已经阅读过关于box-sizing的信息，但是我还是不明白如何正确实现它。试图把它放在box1类上，没有什么发生，试过放在box2类上，也没有发生。

I've read about box-sizing but I still don't understand how to implement it correctly. Tried putting it on the box1 class and nothing happen, tried putting on the box2 class and nothing happen also.

提前感谢。

其他注意：它必须是响应式的，我不知道父div的大小，因此100％为子div。

Additional Note: It has to be responsive ie I do not know the size of the parent div thus the 100% for the child div.

推荐答案

只要设置 left：20px; 和 right：20px; c $ c> width：100％

Just set left: 20px; and right: 20px; and remove width: 100%

现场演示

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

或添加 left：20px; 和计算函数 width：calc（100％ - 40px）

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

live Demo

这篇关于如何强制位置绝对与100％宽度适合父div与填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！