Css 显示内部有多个元素、填充和边距：表格单元格扩展到父单元格外部

我使用的是

display:table cell

，因此我可以轻松地执行

height:100%

内部的子元素以获得100%的高度

问题是，当我有多个元素在里面或填充或边距时，父元素不会拉伸，而是插入内容。放置

溢出：隐藏
将不起作用，因为我需要将子项正确地放入父项中

加价：

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

小提琴：

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


在其他元素之上存在
h4
h4上的填充和边距
在
菜单
和
内容
上填充

如何解决这个问题？我肯定想使用
显示：表格单元格
，因为我需要子项能够垂直拉伸以填充父项。
您必须删除“.menu、.content”菜单中的
浮动：左
和
显示：内联块
”，还必须应用
显示：表格单元格
。因此，两个div可以水平对齐

这是密码

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

但是现在，表格不再100%垂直延伸：（检查这个更新的fiddle链接，我在
.content
div添加了更多内容。是的，但是如果你增加结果视口的高度，你可以看到内容的高度不再延伸以适应整个视口。你会看到它。需要脱机，这里已经很晚了。
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;
    }