Question

如何强制具有绝对定位的孩子适合父级填充？在我的案例中，对孩子的绝对定位是必须的。

编辑：我希望孩子进入父母的内容框，而不仅仅是放入框中。

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

Answer 1

您可以使用box-sizing: border-box;和width: calc(100% - 50px);

执行此操作

https://jsfiddle.net/wmbszuzo/10/

Answer 2

您是否尝试删除width:100%？它将默认为width:auto，这可能是您在这种情况下想要的。

Answer 3

添加到子css：

{{1}}

here

Answer 4

因为你有一个固定的填充，你可以这样做

#wrapper{
  padding:25px;
  height:100%;
  width:100%;
   background-color:blue;
   position:relative;
}

#elem{
  margin: -25px;
  width:100%;
  height:100%;
  position:absolute;
  background-color:green;
}

Answer 5

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

强制使用绝对子元素使父级填充

5 个答案: