我正在使用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似乎很好。
答案 0 :(得分:0)
您可以在.menu
中添加大小调整大小.menu{
background: green;
height: 100%;
padding-top: 10px;
-moz-box-sizing:border-box; /* Firefox */
box-sizing:border-box;
}
box-sizing允许您为元素添加填充和边框,而不会影响高度。基本上改变了盒子模型
答案 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}
以下是您的工作链接..