Html CSS/Bootstrap div填充它'；母高

我几乎一直在做代码的侧菜单div，将父级高度填充到100%。在提出要求之前，我已经尝试了大量的谷歌搜索和测试

代码段：

我不明白为什么两边的菜单都只填充自己内容的高度，而不是填充父分区的高度。有什么我做错了吗？如果我不加的话，那就好了！DOCTYPE html到我的项目中，但据我所知，它的解决方案不好，所以我应该找到其他解决方法

致以最诚挚的问候

添加

显示：flex至
.row.content
：

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

增加
flex:1至
。侧栏
：

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

使用
bootstrap-4css
获得所需的结果


还删除了额外的
行内容
div


html，
身体{
身高：100%；
}
/*设置网格的高度，使sidenav可以为100%（根据需要调整）*/
.row.content{
身高：100%；
宽度：70%；
保证金：自动；
}
/*设置灰色背景色和100%高度*/
.侧导航{
填充顶部：20px；
背景色：#f1f1；
身高：100%；
}
/*在小屏幕上，将sidenav和grid的高度设置为“自动”*/
@媒体屏幕和屏幕（最大宽度：767px）{
.侧导航{
高度：自动；
填充：15px；
}
.row.content{
高度：自动；
}
}
h5{
字体大小：14px；
边框底部：6px实心红色；
字体大小：粗体；
}
.rightcontainer{
宽度：100%；
高度：100%裕度：自动；
边框：0px实心；
边界半径：4px；
边缘底部：5px；
边框底部：6px实心红色；
}
.rightcontainer.accountpanel.columncontainer.col-sm-6{
右边填充：0px；
左侧填充：0px；
}
.leftcontainer{
宽度：100%；
保证金：自动；
边缘底部：5px；
边框底部：6px实心红色；
}
.leftcontainer.eventinfo{
宽度：100%；
高度：38px；
边缘底部：5px；
边框：1px纯色灰色；
}
.leftcontainer.eventinfo.split{
高度：17px；
}
.leftcontainer.eventinfo.split span{
字体大小：12px；
}
.leftcontainer.banner{
宽度：100%；
高度：75px；
边框：1px纯色灰色；
边缘底部：5px；
}

获取客户端横幅
向导横幅
活动日程
Bl
0 D 0
Bl
0 D 0
Bl
0天0小时
Bl
0天0小时
Bl
0天0小时n
B
0 D 0
Bl
0 D 0
Bl
0 D 0
欢迎
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。圣岛例外
有时，如果你不自以为是，那么你就必须为自己的行为负责，因为这是一种奉献精神，是一种对劳动和财富的暂时性伤害。我们的工作是最低限度的，我们的工作是实践性的
实验室是一个普通的实验室


试验
同侧眼线

广告

广告

Height in percentage要求父元素也有一个定义的高度集，而不仅仅是返回到
auto
。
.leftcontainer
元素的父元素只是一个完全没有指定高度的列元素，而
.rightcontent
元素甚至没有出现在您的示例中。您使用的是bootstrap 4类和bootstrap 3 css！！！为什么？
@media screen and (max-width: 767px) {
    .sidenav {
        height: auto;
        padding: 15px;
    }
    .row.content {height:auto; display: block;}
}