絶対位置が幅と左の値であまり大きくない

Question

私は絶対位置指定のdivを絶対位置指定された要素の子です。設定幅：100％、左：1px、右：子供が働いていない場合は1px。私が直面している問題は、それが親を超えて要素を得ることです。

<div class="outer"> 
    <div class="inner"> 

    </div> 
</div> 
.outer{ 
    position:absolute; 
    width:80px;height:80px; 
    border:1px solid #d3d3d3; 
} 
.inner{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:red; 
    left:1px;right:1px;bottom:1px;top:1px 
} 

ちょうど子要素に100％を奪うと、内側のdivが親に適合しますhere

Answer 1

を参照してください。

.outer{ 
    position:absolute; 
    width:80px;height:80px; 
    border:1px solid #d3d3d3; 
} 
.inner{ 
    position:absolute; 
    background:red; 
    left:1px;right:1px;bottom:1px;top:1px 
} 

Answer 2

あなたはボックスが他の上に産むので、それはまた、80px PLUS左上右と下のプロパティになるだろうという意味、100％とし、幅と高さを持っているためです。あなたはそれが箱の中に行くと完全に比例削除の高さと幅になりたい場合は今：

.inner{ 
    position:absolute; 
    background:red; 
    left:1px;right:1px;bottom:1px;top:1px 
} 

Answer 3

また、このことができます：

.outer{ 
 
    margin-top: 10px; 
 
    position:absolute; 
 
    width:80px;height:80px; 
 
    border:1px solid #d3d3d3; 
 
    padding: 1px; 
 
} 
 
.inner{ 
 
    position:relative; 
 
    width:100%; 
 
    height:100%; 
 
    background:red; 
 
}