显示内部有多个元素，填充和边距：表格单元格延伸到父级外部

Question

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

问题是，当我在内部具有多个元素或填充或边距时，父级不会拉伸，而是内容会戳穿。 设置overflow: hidden将不起作用，因为我需要孩子将其正确放置在父级中。

标记：

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

小提琴： http : //jsfiddle.net/ZQFrM/

戳穿是由于以下原因导致内部高度增加：

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

如何解决此问题？ 我绝对想使用以下display: table-cell因为我需要孩子能够垂直拉伸以填充父母。

Answer 1

您必须从'.menu，.content'中删除float:left和display:inline-block ，还必须应用display:table-cell 。 因此，两个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;
    }