使用填充或邊距縮小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