如何强制位置绝对与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;
}
这篇关于如何强制位置绝对与100%宽度适合父div与填充?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!