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

时间:2014-02-24 11:42:29

标签: css padding

我正在使用display: tabledisplay: 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延伸到其父容器之外,导致各种问题: enter image description here

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

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

4 个答案:

答案 0 :(得分:0)

您可以在.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/

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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

中删除.menu
p{padding:0; margin:0}

以下是您的工作链接..

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