Question

这就是我的代码：http://codepen.io/helloworld/pen/JoKmQr

在IE 11上运行。

当我将5％的填充设置为itemContainer时，为什么正确的红色div溢出到屏幕中？

<div style="background:lightblue;">Absolute position inside container</div>
<div id="itemContainer"> 
  <div class="item i1">1</div>
  <div class="item i2">2</div>
  <div class="item i3">3</div>
</div>


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body, html { 
  padding: 0;
  margin:0;
  height:100%; 
}

.item{
  position:absolute;
}

#itemContainer{
  background:orange;
  height:100%;
  position:relative;
  padding:5%;
}

.item.i1 {
   width: 50%; 
   height:50%;
   background:lightgreen;
}

.item.i2 {
   width: 50%; 
   height:50%;
   top:50%;
   background:lightgray;;
}

.item.i3 {
   width: 50%; 
   height:100%;  
   left: 50%;
   background:red;   
}

更新

我的目标是在屏幕上放置3个项目，其中包含＆＃34; 2列＆＃34; -layout和第2个＆＃34;列＆＃34;应该模拟一个＆＃34; Rowspan＆＃34;通过赋予它100％的高度，而第1项和第2项具有50％的高度。

Answer 1

这是因为填充被计为高度的一部分 - 如果你要将'内部'div放到#itemContainer并在外部div上设置填充，你就可以修复它。请看我的叉子：http://codepen.io/anon/pen/XJMMoZ

Answer 2

填充没有问题（使用box-sizing时：border-box;）。

#itemContainer的位置为：relative。

子div（.item）的位置是：绝对的。

要绝对定位子项（.item），浏览器需要知道相对于哪里（顶部，左侧，右侧和底部）。

在您的示例中，只需将这些“定位”属性添加到绝对定位的div：

.item{
  position:absolute;
}    


.item.i1 {
       width: 50%; 
       height:50%;
       background:lightgreen;
      top:0;
      left:0;
    }

    .item.i2 {
       width: 50%; 
       height:50%;
       top:50%;
       background:lightgray;
      bottom:0;
      left:0;
    }

    .item.i3 {
       width: 50%; 
       height:100%;  
       left: 50%;
       background:red;  
      top:0;
      right:0;
    }

http://codepen.io/anon/pen/GgWVjY

Answer 3

填充被视为内容元素的宽度/高度的增加，而没有注意到它的填充。

如果你有5％的填充，你需要将内容设置为90％的宽度和高度，因为你已经有10％的填充（5％顶部和5％底部分别5％左边和5％右边。

对于50％的内容块，您需要将其更改为45％。 100％获得90％。

这样它应该适合。

Answer 4

我建议您重新编写代码，以便它不会使用绝对定位的元素，尤其是对于列等内容，或者您将继续遇到类似这样的问题。并且由于填充而不得不将宽度从100％缩小，这不是必需的，特别是当边框可以防止这种需要时，但即便如此，我仍然建议这样的事情：

HTML：

<div class="container">

    <div class="leftCol">

        <div class="box1"></div>
        <div class="box2"></div>    

    </div><!--

 --><div class="rightCol">

    </div>

</div>

CSS：

    .container {
        display: block;
        width: 50%;
        height: 500px;
        padding: 25px;
        background: #DDD;}

    .leftCol,
    .rightCol {
        display: inline-block;
        vertical-align: top;
        height: 100%;
        width: 50%;}

    .leftCol {
        background: #BBB;}

    .rightCol {
        background: #CCC;}

    .box1 {
        display: block;
        width: 100%;
        height: 50%;
        background: gray;}

    .box2 {
        display: block;
        width: 100%;
        height: 50%;
        background: #555;}

当填充集合时，绝对定位在相对父级内部溢出div

4 个答案: