强制使用绝对子元素以使用填充使父元素适合

  • 本文关键字:元素 填充 html css
  • 更新时间 :
  • 英文 :


如何强制具有绝对位置的孩子适合带有填充的父母?就我而言,对孩子的绝对定位是必须的。

编辑:我希望孩子进入父母的内容框,而不仅仅是适合盒子。

<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/

最新更新