CSS/Bootstrap div 填充它的父高度

Question

我几乎坚持让我的代码的侧边菜单 div 填充父高度为 100%。在提出问题之前，我已经尝试了很多谷歌搜索和测试。

代码片段：http : //jsfiddle.net/zntxaspd/

html, body { height: 100%;}
.row.content { height: 100%; width:70%; margin: auto; }
.sidenav { padding-top: 20px;background-color: #f1f1f1; height: 100%;}

@media screen and (max-width: 767px) {
.sidenav {
    height: auto;
    padding: 15px;
}
.row.content {height:auto;}
}
h5  { font-size: 14px; border-bottom: 6px solid red; font-weight: bold; }
.rightcontainer {   width:100%; height:100% margin: auto; border: 0px solid; border-radius: 4px; margin-bottom: 5px; border-bottom: 6px solid red;}
.rightcontainer .accountpanel .columncontainer .col-sm-6 { padding-right: 0px; padding-left: 0px;}
.leftcontainer {width:100%; margin: auto;  margin-bottom: 5px; border-bottom: 6px solid red; }
.leftcontainer .eventinfo {width:100%; height: 38px; margin-bottom: 5px; border: 1px solid gray; }
.leftcontainer .eventinfo .split { height: 17px; }
.leftcontainer .eventinfo .split span { font-size: 12px; }
.leftcontainer .banner {width: 100%; height: 75px; border: 1px solid gray; margin-bottom: 5px; }

我不明白为什么两侧菜单都只填充自己内容的高度，而不是填充父 div 的高度。有什么我做错了吗？如果我不将 !DOCTYPE html 添加到我的项目中，它会很好地填充，但据我了解它的糟糕解决方案，所以我应该找到其他方法。

此致

Answer 1

http://jsfiddle.net/zntxaspd/6/

添加display: flex;到.row.content：

.row.content { height: 100%; width:70%; margin: auto;  display: flex; }

添加flex: 1;到.sidebar：

.sidenav { padding-top: 20px;background-color: #f1f1f1; flex: 1}

调整您的媒体查询以保持响应：

@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {height:auto; display: block;}
}