有没有办法让CSS识别100％包括填充，边距和边框？

Question

我有以下HTML代码：

<div class="panel">Some Text Here</div>

附上以下css

.panel{
    display:inline-block;
    height:100%;
    border:1px solid black;
}

因为面板有边框导致垂直滚动条出现，有没有办法让CSS识别100％以包含填充，边距和边框？

Answer 1

好吧，如果你的目标是CSS3，你可以使用box-sizing property

当然，只有较新的浏览器支持它，即使这样他们也不直接支持它，所以你必须使用特定于浏览器的版本（例如-moz-box-sizing）

.panel{
    display:inline-block;
    height:100%;
    border:1px solid black;

    box-sizing: border-box;         // IE8, Opera
    -moz-box-sizing: border-box;    // Firefox
    -webkit-box-sizing: border-box; // Chrome
}