html - 使用填充或边距缩小 div

Question

我正在尝试做的是以下内容。

我有一个固定高度的 div，让我们说它的100px.
我想要的是这个 100px div 中的一个 div，其高度为100%但10px顶部和底部更短。
所以结果将是一个具有100px高度的包装器 div 和一个包装器 div 内的 div，它10px从顶部开始并10px从底部结束（即height: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

您正在寻找 CSSbox-sizing属性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;