顯示內填充：表格單元延伸過容器

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/

菜單