我非常想让代码的侧边菜单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，它就很好，但是据我所知，它的解决方案很差，所以我应该找到其他解决方法。
最好的祝福
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;}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句