Bootstrap 4, full-height, full-width layout, chrome ok, firefox/ie11 not

Question

I have a simple prototype of what I'm trying to do. Chrome is fine with it, but it doesn't work in firefox or IE11 (haven't tried Edge). I'm using 'container-fluid' to get full width, 'h-100' to get full-height, and 'overflow-y' because I want to be able my left and right sections to scroll vertically as needed. What I see is the left-hand section contents overflows the section. I tried adding 'min-height' per this answer, but it didn't make a difference.

Is this a bootstrap bug (this is beta 2), or is there some additional styles I need to set?

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

  <style>
    .border {
      border-width: 5px !important;
    }
  </style>
</head>

<body>

<div class="container-fluid h-100 border border-danger">
  <div class="row">
    <div class="col-3 h-100 border border-success"
         style="overflow-y: auto;">
      <div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
      </div>
    </div>

    <div class="col h-100 border border-primary"
         style="overflow-y: auto;">
      Info...<br>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg/1280px-Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg">
    </div>
  </div>
</div>


</body>
</html>

I think the problem lies with `height: 100%` somewhere along the DOM structure. This may get you closer: https://jsfiddle.net/mbeuu6tp/1/ — Michael Benjamin, Oct 30 '17 at 19:42

Asons · Accepted Answer · 2017-10-31T13:14:29.043

Here you hit one of the most common error when using percent based height.

An element using percent for its height won't work unless the element's parent have a height (or being position absolute), and if the parent also use percent, its parent need a height, and so on, until the html element is reached, which get its height from the viewport's height.

By adding h100 to the .row and this rule, it will work

html, body {
  height: 100%;
}

Stack snippet

html, body {
  height: 100%;
}
.border {
  border-width: 5px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="container-fluid h-100 border border-danger">
  <div class="row h-100">
    <div class="col-3 h-100 border border-success"
         style="overflow-y: auto;">
      <div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat, turpis ac porttitor sodales, turpis magna facilisis quam, eget efficitur neque tortor sit amet risus. </p>
            <span class="active">More...</span>
          </div>
        </div>
      </div>
    </div>

    <div class="col h-100 border border-primary"
         style="overflow-y: auto;">
      Info...<br>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg/1280px-Wide_panorama_of_Aam_Talab_Lake%2C_Raichur.jpg">
    </div>
  </div>
</div>

So close and yet so far! At least for this sample, the style on html & body doesn't seem necessary. From the dev console, I now see that "h-100" is adding "height: 100%!important", and I now have that on the container, the row, and the cols. I guess that chrome treats that as being inherited by the row, where I had it missing. Thanks! — eflat, Oct 31 '17 at 16:26
I take back what I said about the height on html,body....I needed to add that to my angular app to get the desired behavior. — eflat, Oct 31 '17 at 17:10

Bootstrap 4, full-height, full-width layout, chrome ok, firefox/ie11 not

1 Answers1