css - 显示 : table-cell extends outside parent 内的多个元素、填充和边距

Question

我正在使用 display: table-cell 以便我可以轻松地对 height:100% 内部的子元素进行 100% 高度调整。

问题是，当我在内部有多个元素或填充或边距时，父级不会拉伸(stretch)，而是内容会穿透。放置一个 overflow: hidden 是行不通的，因为我需要 children 正确地适应 parent 。

标记:

<div class="container">
    <div class="subcontainer">
        <h4>title</h4>
        <div class="menu">
            <p>test</p>
            <p>test</p>
        </div>
        <div class="content">
            <p>content</p>
            <p>content</p>
        </div>
    </div>
</div>

CSS:

p{
    padding:0;
    margin:0;
}

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

h4{
  padding: 0;
  padding-bottom: 5px;
  background: blue;
  margin: 0;
  border-bottom: 1px solid black;
  margin-bottom: 5px;
}

.menu, .content{
    background: green;
    height: 100%;
    display: inline-block;
    float:left;
    width: 200px;
    padding: 20px;
}

.content{
    background: purple;
    width: 400px;
}

fiddle :http://jsfiddle.net/ZQFrM/

戳穿是由于内部高度增加，原因如下:

• 在其他元素之上存在 h4。
• h4 的填充和边距。
• 在 menu 和 content 上填充。

如何解决这个问题？我绝对想使用 display: table-cell，因为我需要子级能够垂直拉伸(stretch)以填充父级。

Answer 1

你必须从 '.menu, .content' 中删除 float:left 和 display:inline-block 你还必须应用 display:表格单元格。所以两个 div 都可以水平对齐。

这是代码 http://jsfiddle.net/kheema/ZBLY7/7/

这是 CSS..

p{
    padding:0;
    padding:0;
}
body{
    margin: 0;
    padding: 0;
    background: red;
}

.container{
    height: 100%;
    display: table;
    margin: 0;
    padding: 0;
}

.subcontainer{
    display: table-cell !important;
    height: 100%;
}

h4{
  padding: 0;
  padding-bottom: 5px;
}

    .menu, .content{
        background: green;
        height: 100%;
        /*display: inline-block;
        float:left;*/
    display: table-cell;
        width: 200px;
    }

    .content{
        background: purple;
        width: 400px;
    }