Question

我要做的是以下内容。

我有一个固定高度的div，让我们说出100px 我想要的是这个100px div中的div，其高度为100%，但顶部和底部的10px更短。
因此，结果将是一个包装器div，其高度为100px，并且此包装器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-sizing属性border-box

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

Updated example

Chris Coyier有一个很好的详细article

对于跨浏览器支持，建议您按如下方式添加前缀：

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

用填充或边距收缩div

1 个答案: