CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Ginters Ozols
Ginters Ozols

Reputation: 79

CSS/Bootstrap div to Fill it's parent height

I'm pretty much stuck with making side menu div's of my code filling the parent height to 100%. I've tried alot of googling and testing before comming to ask..

Code snippet: 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; }

I can not understand why both side menu's are filling just the height of their own content instead of filling height of the parent div. Is there something I'm doing wrong? It fills fine if I dont add !DOCTYPE html to my project, but from what I understand its bad solution so I should find other way around..

Best regards

Upvotes: 5

Views: 18730

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Use bootstrap-4 CSS to achieve the desired result

Bootstrap 4

Also removed the extra 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>

Upvotes: 1

Rence
Rence

Reputation: 2950

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

Add display: flex;to .row.content:

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

Add flex: 1; to .sidebar:

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

Adjust your media query to keep it responsive:

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

Upvotes: 7

Related Questions