html - パディングまたはマージンでdivを縮小

Question

私がやろうとしていることは次のとおりです。

高さが固定の div があります100px。
私が欲しいのは、この 100px div 内の高さの div ですが、上下100%が短くなります。 したがって、結果は、高さのあるラッパー div と、このラッパー div 内の div で、上から始まり下 (つまり) で終了します。 問題は、合計の高さが の div を取得していることです。10px
100px10px10pxheight:80px
120px

注: 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

box-sizingCSSプロパティを探しているborder-box

box-modelは要素のレンダリングされた幅/高さを として指定し、specified width/height + padding + borderこの合計からパディングとボーダーのプロパティを差し引くために、CSS3 仕様は追加しますbox-sizing

更新された例

Chris Coyier のすばらしい詳細な記事があります。

クロス ブラウザーのサポートのために、次のようにプレフィックスを追加することをお勧めします。

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