使用填充或边距缩小div

Question

我想要做的是以下内容。

我有一个固定高度的div，我们只是说它的100px。
我想要的是这个100px的div内的高度为100%但是然后10px在顶部和底部较短。
所以结果将会是一个高度为100px的包装div，这个包装div内的div从顶部开始10px，从底部开始10px（即height:80px）。
问题是我得到一个总高度为120px的div。

注：只有HTML CSS解决方案
注2：包装内的div有100％的高度

CSS和HTML

#t{ 
 
    height:100px; 
 
    width:5px; 
 
    background: blue; 
 
} 
 

 
#e{ 
 
    height:100%; 
 
    width: 5px; 
 
    padding-top:10px; 
 
    padding-bottom: 10px; 
 
    background: yellow; 
 
} 
 

 
#s{ 
 
    height:100%; 
 
    width: 5px; 
 
    background: gray; 
 
}

<div id="t"> 
 
    <div id="e"> 
 
    <div id="s"> 
 
    </div> 
 
    </div> 
 
</div>

这里的JSfiddle我一直玩 http://jsfiddle.net/MWUsM/2/

Answer 1

您正在寻找的CSS属性box-sizingborder-box

的box-model指定元素为specified width/height + padding + border的呈现宽度/高度，并从这个总和减去填充和边框属性，在CSS3 specification adds box-sizing

Updated example

克里斯Coyier有一个很好的和详细article

对于跨浏览器的支持，它的建议你添加前缀如下：

-webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 

时，你的内心的div