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，则它可以正常填充，但据我所知，这是一种不好的解决方案，因此我应该找到其他方法。

最好的问候

- Ginters Ozols

---

以百分比设置高度需要父元素也定义了高度，而不是仅仅回退到“auto”。您的“.leftcontainer”元素的父元素只是没有指定任何高度的列元素，在您的示例中甚至不存在“.rightcontent”元素。 - CBroe

你正在使用Bootstrap 3的CSS样式，但是却使用了Bootstrap 4的类名。为什么这样做呢？ - Nandita Sharma

Answer 1

请将.row.content添加display: flex;：

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

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

将.sidebar添加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;}
}

- Rence

Answer 2

使用bootstrap-4 CSS来实现所需的结果。

Bootstrap 4

还删除了额外的row content div。

html,
body {
  height: 100%;
}


/* Set height of the grid so .sidenav can be 100% (adjust as needed) */

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


/* Set gray background color and 100% height */

.sidenav {
  padding-top: 20px;
  background-color: #f1f1f1;
  height: 100%;
}


/* On small screens, set height to 'auto' for sidenav and grid */

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
  <div class="row justify-content-center">
    <div class="col-sm-2 sidenav">
      <div class="leftcontainer">
        <div class="banner"> Get Client Banner </div>
        <div class="banner"> Guides Banner </div>
        <h5> Event Schedule </h5>
        <div class="eventinfo">
          <div class="split"><span><strong>Bl</strong></span></div>
          <div class="split"><span>0 D 0</span></div>
        </div>
        <div class="eventinfo">
          <div class="split"><span><strong>Bl</strong></span></div>
          <div class="split"><span>0 D 0</span></div>
        </div>
        <div class="eventinfo">
          <div class="split"><span><strong>Bl</strong></span></div>
          <div class="split"><span>0 D 0 H</span></div>
        </div>
        <div class="eventinfo">
          <div class="split"><span><strong>Bl</strong></span></div>
          <div class="split"><span>0 D 0 Hr</span></div>
        </div>
        <div class="eventinfo">
          <div class="split"><span><strong>Bl</strong></span></div>
          <div class="split"><span>0 D 0 Hr n</span></div>
        </div>
        <div class="eventinfo">
          <div class="split"><span><strong>B</strong></span></div>
          <div class="split"><span>0 D 0 </span></div>
        </div>
        <div class="eventinfo">
          <div class="split"><span><strong>Bl</strong></span></div>
          <div class="split"><span>0 D 0</span></div>
        </div>
        <div class="eventinfo">
          <div class="split"><span><strong>Bl</strong></span></div>
          <div class="split"><span>0 D 0 </span></div>
        </div>
      </div>
    </div>
    <div class="col-sm-7 text-left">
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-3 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

- Nandita Sharma