显示内填充：表格单元延伸过容器

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{ 
    background: green; 
    height: 100%; 
    padding-top: 10px; 
    -moz-box-sizing:border-box; /* Firefox */ 
    box-sizing:border-box; 
} 

盒大小，您可以填充和边框添加到您的元素，而它影响的高度。基本上改变了盒模型

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

Answer 2

您可以使用子元素，而不是使用在父填充顶部上的margin-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/

菜单