Есть ли способ заставить 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

Конечно, только более новые браузеры поддерживают его, и даже тогда они не поддерживают его напрямую (пока), поэтому вы должны использовать конкретную версию браузера (например, -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
}