min-height Set To 100% Will Cause Scrollbar If I Also Set Padding
css, html
Solution
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.
Problem
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; } ```