显示中的填充：table-cell延伸到容器之外

Question

我正在使用display: table和display: table-cell来允许我的布局中的列一直延伸到height: 100%的底部。

这是我的标记：

<div class="container">
    <div class="subcontainer">
        <div class="menu">
            <p>test</p>
        </div>
    </div>
</div>

CSS：

html{
    height: 100%;
    overflow-y: scroll;
    background: white;
}

body{
    height: 100%;
    margin: 0;
    padding: 0;
    background: red;
}

.container{
    height: 100%;
    display: table;
    margin: 0;
    padding: 0;
}

.subcontainer{
    display: table-cell !important;
    height: 100%;
}

.menu{
    background: green;
    height: 100%;
    padding-top: 10px;
}

小提琴：http://jsfiddle.net/LbELK/

问题： 我想向padding-top添加一些.menu。问题是这个填充导致.menu延伸到其父容器之外，导致各种问题：

我想对display: table-cell;中的元素使用填充和边距。但是，它们会导致元素延伸到容器之外。如何解决这个问题？

IE11和FireFox 27.0.1中会出现此问题。 Chrome 33似乎很好。

Answer 1

您可以在.menu

中添加大小调整大小

.menu{
    background: green;
    height: 100%;
    padding-top: 10px;
    -moz-box-sizing:border-box; /* Firefox */
    box-sizing:border-box; 
} 

box-sizing允许您为元素添加填充和边框，而不会影响高度。基本上改变了盒子模型

http://jsfiddle.net/LbELK/24/

Answer 2

您可以在子元素上使用margin-top，而不是在父元素上使用padding-top：http://jsfiddle.net/LbELK/10/

.menu{
    background: green;
    height: 100%;
    overflow:hidden;
}

.menu p {
    margin-top:10px;
}

Answer 3

试试这个：希望它有所帮助：

http://jsfiddle.net/neharikapadala/LbELK/13/

.menu{
    background: green;
    height: 100%;
    padding-top: 10%;
}

Answer 4

你应该试试这个..因为<p>标签默认有一些空间，所以删除边距和填充。同时从padding-top类

中删除.menu

p{padding:0; margin:0}

以下是您的工作链接..

http://jsfiddle.net/kheema/LbELK/17/