如何强制具有绝对位置的孩子适合带有填充的父母?就我而言,对孩子的绝对定位是必须的。
编辑:我希望孩子进入父母的内容框,而不仅仅是适合盒子。
<body>
<div id="wrapper">
<div id="elem">
</div>
</div>
</body>
<style>
#wrapper{
padding:25px;
height:100%;
width:100%;
background-color:blue;
position:relative;
}
#elem{
width:100%;
height:100%;
position:absolute;
background-color:green;
}
</style>
链接到jsfiddle:https://jsfiddle.net/wmbszuzo/
box-sizing: border-box;
和width: calc(100% - 50px);
来执行此操作
https://jsfiddle.net/wmbszuzo/10/
您是否尝试过删除width:100%
?它将默认为 width:auto
,这可能是您在这种情况下想要的。
因为你有一个固定的填充,你可以这样做
#wrapper{
padding:25px;
height:100%;
width:100%;
background-color:blue;
position:relative;
}
#elem{
margin: -25px;
width:100%;
height:100%;
position:absolute;
background-color:green;
}
@D. Nizio 试试这个: https://jsfiddle.net/wmbszuzo/57/
.CSS
#wrapper {
padding: 25px;
height: 100%;
width: 100%;
background-color: blue;
position: relative;
}
#wrapper:nth child {
width: auto;
height: 100%;
position: absolute;
}
.elem {position:relative;
padding:0px;
margin-right:25px;
background-color:green;
}
.HTML
<div id="wrapper">
<div>
<div class="elem">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
</div>
添加到子 css:
top:0; left:0;
https://jsfiddle.net/wmbszuzo/7/