Bootstrap 4 offers a full-height, full-width layout that is optimized for Chrome, but may not display as well on Firefox or

My current project has a basic prototype that functions fine in Chrome, but encounters issues in Firefox and IE11. I am utilizing 'container-fluid' for full-width, 'h-100' for full-height, and 'overflow-y' to enable vertical scrolling in my left and right sections. However, I am experiencing content overflow in the left-hand section. I attempted to address this by adding 'min-height' based on this answer, but to no avail.

Is this a bug within Bootstrap (using beta 2), or are there additional styles that need to be defined?

<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>
twitter-bootstrapcssflexboxoverflowbootstrap-4

Answer №1

One of the most common errors you encounter when using a percentage-based height is highlighted here.

An element's height specified in percentage will not function properly unless its parent element also has a defined height (or is positioned absolutely). Additionally, if the parent element also uses a percentage-based height, its parent must have a defined height as well, continuing up the chain until it reaches the html element, which derives its height from the viewport.

Adding h100 to the .row class and applying this CSS rule will resolve the issue:

html, body {
  height: 100%;
}

View the code snippet here:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Bootstrap form control class to enhance the appearance of WooCommerce address fields

I'm struggling to incorporate the bootstrap class "form-control" into all of the woocommerce address fields in my account and during the checkout process. Essentially, I am attempting to apply the "form-control" class to both the billing and shipping ...

csswordpresstwitter-bootstrapwoocommerce

What is the trick to shortening paragraphs with dots...?

There is a p tag, <p> most iconic character in cinema</p> I need to truncate the text after 8 characters, and display dots afterwards. For example: most ic... Is there a way to achieve this using CSS? Any help with AngularJS would also be ...

htmlcssangularjs

Creating a CSS auto center for elements, with a unique twist

I have a design layout like this: Click here to view the image My auto-centered content is styled with the following CSS: width: 960px; margin: 0px auto; Within this auto-centered content, there is a DIV element that needs to span the full width of the ...

htmlcss

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

In my user interface, I have implemented three radio buttons labeled as "Easy," "Medium," and "Hard." Each button is assigned to a distinct Javascript function that manipulates the visibility of corresponding div elements. The main purpose behind this setu ...

javascriptjqueryhtmlcsshidden

Guide on achieving horizontal scrolling in Ionic 3

Check out this image I have a list of 10 names in an ion-scroll, but they are appearing on separate lines like paragraphs. Below is my HTML code: <ion-scroll scrollX="true" style="width:100vw; height:50px" > <ion-row class="headerChip"& ...

cssangularscrollionic2ionic3

Is there a way to spin the picture but keep the container still?

Is there a way to animate the rotation of the gradient color without rotating the rhombus? I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect? .box { position: absolute; top ...

htmlcsscss-animations

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

javascripthtmlcssreactjs

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

Add content to the beginning of the input with the assistance of bootstrap. However, ensure that when utilizing "form-group row", the content is shifted

I am experiencing an issue with my Bootstrap 4 form. I am using the 'form-group row' class to display labels and inputs on the same line, but when I try to prepend a $ sign before an input, it shifts the input to the next line. Below is the code ...

htmlcssbootstrap-4

Managing the appearance of one DOM element using another DOM element

Hey there, I'm currently working on an Angular Material tooltip implementation. When I hover over my span element, the tooltip appears. Now, I'm wondering how I can dynamically change the background color of the tooltip based on certain condition ...

javascripthtmlcssangularangular-material2

Submit a Bootstrap modal with AJAX and receive blank $_POST data

After setting up my modal form with pre-defined data, I encountered an issue when trying to submit it with ajax. The form.php script was receiving an empty $_POST array even though the submit button was being clicked. What could be causing this problem? & ...

phpjqueryajaxtwitter-bootstrap

Error with @media in Webpack 3 and Bootstrap 4

Currently, I am facing an issue while trying to use React, Typescript, Webpack 3, and Bootstrap 4 to develop a simple project. The problem arises when I import bootstrap.css in my main .tsx file as I encounter an error stating Unexpected Symbol - @ - in /n ...

reactjswebpackbootstrap-4

Arranging titles on the top of the page in a column format, resembling an index

Has anyone figured out how to make the title of the content stick at the top, one below the other, as the user scrolls? I've been using Bootstrap's Scrollspy, which works fine, but I need a few additional features. You can check out the codepen l ...

javascriptjqueryhtmlcssscroll

The Quirks of jQuery's .load() Method

On my website, I am incorporating a basic jQuery script to load content from one part of a webpage into the 'display container' on the same page. The content being loaded consists of multiple divs enclosed within an outer <div> that is hid ...

javascriptjqueryhtmlcssajax

SVG: organizing objects based on event priority

I am struggling with layering and event handling in an SVG element. Check out the example here: https://stackblitz.com/edit/angular-ivy-rkxuic?file=src/app/app.component.ts app.component.ts import { Component, VERSION } from '@angular/core'; @ ...

cssangularsvg

Is there a way to use CSS to make a div expand as much as it can?

I am attempting to accomplish the following; Do you think this is achievable? ...

htmlcss

Combine less files in webpack to generate a single minified CSS output file

Can webpack be used to combine multiple less files into one minified CSS file? I'm having trouble setting different output paths for my files. How can I make my CSS file output to './assets/stylesheets/bundle/' instead of './assets/ja ...

javascriptcsswebpack

Chrome causes Bootstrap to add an additional pixel

I am currently utilizing bootstrap to design a webpage. I have divided the body into two segments: content and header. Within the content block, there is a div with the class .container .sameTable, inside of which resides another div with the classes .row ...

htmlcsstwitter-bootstrap

Enclosing floated elements within a parent div

Looking for a way to make a div wrap around a changing number of child elements without specifying a width for the parent? I've managed to get the content wrapping by floating both the child and parent elements, but I'm facing an issue when the ...

htmlcss

Is nesting possible with the &:extend function in LessCss?

I've recently been exploring the Less &:extend feature. My goal is to nest multiple extends - essentially extending a class that itself extends another class. However, after testing it out, I'm not sure if it's working as expected. It ...

cssless