html - 填充集时，相对父级内部的绝对定位会溢出 div

Question

那是我的代码笔:http://codepen.io/helloworld/pen/JoKmQr

在 IE 11 上运行。

为什么我给itemContainer设置5%的padding时右边的红色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 个元素，布局为“2 列”，第 2 个“列”的元素应该通过给它 100% 的高度来模拟“Rowspan”，而元素 1 和 2 有 50%高度。

Answer 1

发生这种情况是因为填充被计为高度的一部分 - 如果您要将“内部”div 放入 #itemContainer 并在外部 div 上设置填充，您将能够修复它。在这里查看我的 fork :http://codepen.io/anon/pen/XJMMoZ