Question

I have a the following html code:

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

With the following css attached

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

Because the panel has a border it’s causing the vertical scrollbar to appear, is there a way to make the CSS to recognize 100% to include the paddings, margins and border?

Answer 1

Well, if you’re targeting CSS3 you can use the box-sizing property

Of course, only newer browser support it, and even then they don’t support it directly (yet), so you have to use the browser specific version (e.g. -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
}