Question

I have a container which creates a colored column down page from top to bottom. I am using the below CSS. This code will cause the vertical scrollbar to appear, however if I remove the padding property it works fine. It seems to be adding the padding to the height. I would expect this when using margin since it is outside of container, but padding is inside it and should not affect the size of it as far as I am aware. This container has no parent elements and contains only one word as content.

How do I make it 100% height while retaining the padding and without having to create any additional child element? Thank you in advance.

#container
{
    background-color : #eee;
    max-width : 910px;
    min-height : 100%;
    padding : 65px 15px;
}

Answer 1

You can add box-sizing: border-box; to the container to get the desired results;

http://jsfiddle.net/Svkp8/

Here is a detailed article by Paul Irish about box-sizing that was provided by steveax in the comments.