Question

我非常想让代码的侧边菜单div将父级高度填充到100％。在问问之前，我已经尝试了很多谷歌搜索和测试。

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

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>

CSS / Bootstrap div以填充其父级高度

2 个答案: