container div not stretching to full height of parent

Question

I'm trying to get the container div to stretch to the full height of the parent. As you can see the parent (body) has the info color and the container has the primary color. The color of the container should stretch over the color of the parent, but its not. I just used colors to help identify what section of my html was not stretching to the full height of the page. Below is the source

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>

  <body class="body bg-info">
    <div class="container-fluid bg-primary">
      <div class="row">
        <div class="col-md-4">
          <div class="info-stats">
            Image Id:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Status:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Endpoint:
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="info-logs">
            Logs:
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

and the css file

.body {
  background: #eeeeee;
}

.info-stats {
  background: #ffffff;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  height: 25%;
  width: 100%;
  margin-top: .5%;
}

.info-logs {
  background: #ffffff;
  height: 50%;
  width: 100%;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  margin-top: 1%;
}

.container-fluid {
  height: 100%;
}

appreciate the help!

you need to specify height on the containers to know what they are being 100% of thus: html, body {height:100%} — Carol McKay, Nov 03 '18 at 06:09
if you specify height:100% on an element it basically gets the full height of the parent container but if the parent container also has height:100% the parent container gets the full height of parent of the parent container , Ultimately in this way You've to give height:100% to the body element if not a single container element has fixed/definite height and you want the height to be 100% (of body/page without using vh) — Waqas Tahir, Nov 03 '18 at 06:15

Vahid · Accepted Answer · 2018-11-03T06:38:39.300

3

The reason is that your html and body tag are not strechted to be full height. You should style them like this:

html, body {
  height: 100vh;
}

Here is a working codepen

You can't use min-height as it won't work with .container-fluid {height:100%}.

Note: Don't use background color for finding html elements! Instead use inspect element and hover your mouse over html elements.

edited Nov 03 '18 at 06:38

answered Nov 03 '18 at 06:28

Vahid

6,639
5
37
61

score 1 · Answer 2 · answered Nov 03 '18 at 06:25

Elements with 100% height only expand to the height of their parent elements. Add 100% height to the html and body tags:

html,body{
   height: 100%;
}

While you're at it, get rid of the height from .info-stats and .info-logs:

html,body{
   height: 100%;
}

.body {
  background: #eeeeee;
}

.info-stats {
  background: #ffffff;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  width: 100%;
  margin-top: .5%;
}

.info-logs {
  background: #ffffff;
  width: 100%;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  margin-top: 1%;
}

.container-fluid {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
  <body class="body bg-info">
    <div class="container-fluid bg-primary">
      <div class="row">
        <div class="col-md-4">
          <div class="info-stats">
            Image Id:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Status:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Endpoint:
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="info-logs">
            Logs:
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

score 0 · Answer 3 · answered Nov 03 '18 at 06:19

Try this... set height: 100%; for .info-stats and .info-logs

.body {
  background: #eeeeee;
}

.info-stats {
  background: #ffffff;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  height: 100%;
  width: 100%;
  margin-top: .5%;
}

.info-logs {
  background: #ffffff;
  height: 100%;
  width: 100%;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  margin-top: 1%;
}

.container-fluid {
  height: 100%;
}

<html>

  <head>
    <meta charset="utf-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>

  <body class="body bg-info">
    <div class="container-fluid bg-primary">
      <div class="row">
        <div class="col-md-4">
          <div class="info-stats">
            Image Id:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Status:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Endpoint:
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="info-logs">
            Logs:
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

container div not stretching to full height of parent

3 Answers3