min-height设置为100%将导致滚动条如果我也设置填充

cry*_*c ツ 2 html css html5 css3

我有一个容器,从上到下创建一个彩色的列.我使用下面的CSS.此代码将导致垂直滚动条出现,但是如果我删除padding属性它可以正常工作.它似乎是将填充添加到高度.在使用margin时我会期待这个,因为它在容器之外,但填充在其中,并且据我所知,不应该影响它的大小.此容器没有父元素,只包含一个单词作为内容.

如何在保留填充的同时使其100%高度并且不必创建任何其他子元素?先感谢您.

#container
{
    background-color : #eee;
    max-width : 910px;
    min-height : 100%;
    padding : 65px 15px;
}
Run Code Online (Sandbox Code Playgroud)

sub*_*aze 7

您可以添加box-sizing: border-box;到容器中以获得所需的结果;

http://jsfiddle.net/Svkp8/

以下是Paul Irish关于steveax在评论中提供的详细文章box-sizing.

  • 好答案.有关更详细的说明,请参阅[Paul Irish的这篇文章](http://paulirish.com/2012/box-sizing-border-box-ftw/) (2认同)