Css 显示中的填充：表格单元格超出容器

我正在使用

display:table

和

display:table cell

来允许布局中的列以

height:100%的方式一直延伸到底部

这是我的标记：

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

小提琴：

问题是：
我想在
菜单中添加一些
填充顶部
。问题是，此填充导致
.menu
超出其父容器，从而导致各种问题：

我想在
display:table单元格中为元素使用填充和边距。但是，它们会导致元素延伸超过其容器。如何解决这个问题

这个问题出现在IE11和FireFox 27.0.1中。Chrome 33看起来不错。
您可以将框大小添加到.菜单中

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

框大小允许您在不影响高度的情况下向元素添加填充和边框。基本上改变了盒子模型

您可以在子元素上使用边距顶部，而不是在父元素上使用填充顶部：

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


你应该试试这个。。由于
标记在默认情况下有一些空间，所以删除边距和填充。同时从
菜单
类中删除
填充顶部

p{padding:0; margin:0}

这是你的工作链接

在菜单中，您有填充顶部：10px。创建问题。我喜欢边框框的想法，但不幸的是，对于我想在元素上添加边距的情况，它仍然会导致问题。
.menu{
    background: green;
    height: 100%;
    overflow:hidden;
}

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

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

p{padding:0; margin:0}