css - 显示内填充 : table-cell extends past container

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;
}

fiddle :http://jsfiddle.net/LbELK/

问题:我想在 .menu 中添加一些 padding-top。问题在于此填充导致 .menu 超出其父容器，从而导致各种问题:

我想对 display: table-cell; 中的元素使用填充和边距。但是，它们会导致元素超出其容器。如何解决？

这个问题出现在IE11和FireFox 27.0.1中。 Chrome 33 似乎没问题。

Answer 1

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

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

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