Optimal middle row height for Twitter-Bootstrap grid system

Hello, I go by the name of Shohel Rana. For quite some time now, I've been grappling with a persistent issue that seems to have no clear solution.

The crux of the problem is as follows:

I have three rows in this setup. The first and third rows should adjust their heights based on their content. However, the second row needs to adapt its height to fill the remaining space available.

Below is an illustration showcasing my dilemma:

What I aim for is for the end result to resemble the following:

HERE IS THE PLUNKER

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18b9094849398a1d3cfd0cfd0">[email protected]</a>" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row row-1">
      <div class="col-md-4">ROW1 COLUMN1</div>
      <div class="col-md-4">ROW1 COLUMN2</div>
      <div class="col-md-4">Lorem ipsum dolor sit amet

Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem ROW2 COLUMN1 ROW3 COLUMN1 ROW3 COLUMN2 Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodommodum dolore labitur Nihil vivamus vocant similique meditari

</html>

CSS:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.container-fluid {
  background-color: gray;
  height: 100%;
}
.row-1 {
  background-color: #b200ff;
  margin-bottom: 5px;
}
.row-1 > .col-md-4 {
  background-color: #0094ff;
  border: 1px dashed #111010;
  text-align: center;
}
.row-2 {
  background-color: #b6ff00;
  margin-bottom: 5px;
}
.row-2 > .col-md-12 {
  background-color: #ff6a00;
  border: 1px dashed #111010;
  text-align: center;
}
.row-3 {
  background-color: #00ff21;
}
.row-3 > .col-md-4 {
  background-color: #00ffff;
  border: 1px dashed #111010;
  text-align: center;
}

Precaution:

  1. Avoid display: table, table-row, and table-cell.
  2. Avoid JavaScript code.

Answer №1

If you're facing a common issue, there's a solution that involves using a spacer element like a div. To implement this solution, some adjustments need to be made to your markup.

Markup:

<div class="container-fluid first-container">
    <div class="row row-1">
        <div class="col-md-4">ROW1 COLUMN1</div>
        <div class="col-md-4">ROW1 COLUMN2</div>
        <div class="col-md-4">ROW1 COLUMN3</div>
    </div>
</div>

<div class="container-fluid full-height-container">
    <div class="row row-2">
        <div class="col-md-12">
            ROW2 COLUMN1
        </div>
        <div class="spacer"></div>
    </div>

</div>

<div class="container-fluid last-container">
    <div class="row row-3">
        <div class="col-md-4">ROW3 COLUMN1</div>
        <div class="col-md-4">ROW3 COLUMN2</div>
        <div class="col-md-4">ROW3 COLUMN3</div>
    </div>
</div>

To prevent content from appearing behind the last row, all significant rows are enclosed in separate containers. The spacer element within the full-height-container must match the height of the last row.

CSS:

    html,
    body {
        height: 100%;
        min-height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .container-fluid {
        background-color: gray;
    }

    .row-1 {
        background-color: #b200ff;
    }

    .first-container {
        position: absolute;
        width: 100%;
        z-index: 1;
    }

    .full-height-container {
        height: 100%;
        padding-top: 25px; /*height of the first row*/
    }

    .spacer {
        height: 22px;
        position: absolute;
        bottom: 0;
    }

    .last-container {
        margin-top: -22px;
    }

    .row-1 > .col-md-4 {
        background-color: #0094ff;
        border: 1px dashed #111010;
        text-align: center;
    }

    .row-2 {
        background-color: #b6ff00;
        height: 100%;
    }

        .row-2 > .col-md-12 {
            background-color: #ff6a00;
            border: 1px dashed #111010;
            height: 100%;
            text-align: center;
        }

    .row-3 {
        background-color: #00ff21;
    }

        .row-3 > .col-md-4 {
            background-color: #00ffff;
            border: 1px dashed #111010;
            text-align: center;
        }

Additional CSS classes enhance clarity and help avoid conflicts with Bootstrap classes. Passing the height property through elements is crucial for proper layout.

Handling fluid behavior becomes challenging due to unpredictable heights. jQuery can compute last-row and spacer heights dynamically, ensuring correct alignment.

Here's a simplified jQuery example:

jQuery:

    $(document).ready(function () {
        setSizes();
    });

    $(window).resize(function () {
        setSizes();
    })

    function setSizes() {
        var lastRowHeight = $("div.last-container").height();
        $("div.spacer").height(lastRowHeight);
        $("div.last-container").css({ marginTop: -(lastRowHeight) });
        $("div.full-height-container").css({ paddingTop: lastRowHeight });
    }

Adjust the JavaScript code as needed for better efficiency.

Bringing everything together:

CHECK OUT THE FIDDLE

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

What is the best way to adjust the heading font size using bootstrap and sass?

Is updating the font size of a heading in bootstrap using sass proving to be a challenge for you? Don't worry, I have tried to fix the code and can help you out. Here is the HTML CODE snippet: <span class="h1" id="minutes">00 ...

The 3D hover effect is malfunctioning in the Firefox browser

I've been working on a 3D hover effect and my code is functioning properly in Opera and Chrome, but for some reason it's not working in Firefox. I've even attempted using vendor prefixes, but to no avail. The strange thing is that when I rem ...

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

After encountering numerous inquiries regarding the creation of disappearing and reappearing menus, I successfully devised a solution that functions seamlessly on desktop and tablet devices. My approach involved utilizing the jQuery .toggleClass function w ...

Is there a restriction on POST requests using PHP?

Attempting to send a large multidimensional form via POST, encountering issue where not all elements are successfully transmitted. The post data structure appears as follows: Array ( [field1] => Array ( [{i}] => Array ( ...

Python code for clicking a button using Selenium

I'm having trouble closing popup windows in Selenium with Python. The button labeled "joyride-close-tip" is functioning correctly and closes the window, but the other two buttons are not working. What could be causing this issue? Even though I copied ...

Initiate an Ajax call to pre-fetch video content

I've been attempting to download a video from my own source and display a loading message while it's being downloaded. Once the download is complete, I want to hide the loading icon and have the video ready for playback. My issue lies in gettin ...

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

Issue with CSS3 calc() validation: Invalid value provided for width, resulting in a parse error

Can you help me validate a CSS3 file that contains the following code snippet? width:calc(96.3% - 312px) When I try to validate it, I get this error message: Value Error : width Parse Error - 312px) My solution might be to implement a JavaScript func ...

Stop the execution of javascript code based on the screen width

On my website, I have two menus located in different sections of the page. One menu is shown when the screen width is greater than 555px, while the other menu appears when the screen width is less than or equal to 555px. Although the menus are essentially ...

Employing setTimeout for hover interactions in conjunction with a tooltip

I have created an SVG map consisting of hexagons grouped together. My goal is to display a tooltip when the user hovers over a group, but with a 3-second delay. If the user moves away before the delay ends, I want to clear that delay to prevent the tooltip ...

How can I set a dropdown back to the first index in MVC?

Within my MVC project, I have a dropdown list bound in a div using the code snippet below: @{ List<SelectListItem> lsqty = new List<SelectListItem>(); for (int i = 1; i <= 10; i++) { SelectListItem sl = new SelectListIt ...

Assistance with Collision Detection in HTML5 Canvas using JavaScript

Attempting to create a platformer game using HTML5 and the canvas feature. I managed to implement collision detection with rectangles, but encountered issues when adding multiple rectangles. I have a function that adds new objects to an array with attribut ...

Utilize express middleware for applying CSS styles in web development

How's it going? I've been experimenting with middleware in Express JS, like this: app.get ('/user/:school/:dual', function (req, res, next) {   ......   ...   ...... }); Everything seems to be working fine so far. But when I na ...

What steps can I take to address the problem in iOS 17 where sound is coming from the earpiece instead of the speaker during camera activation?

I have a Progressive Web App where I use the getUserMedia() API to access the camera and HTML audio tags for handling media content. However, ever since updating to iOS 17, I've faced an issue where audio plays through the earpiece instead of the medi ...

Guide to Pechkin: Instructions and Resources

After testing out wkhtmltopdf successfully, I faced an issue on the server where I couldn't start a process. My alternative solution would be to use this library: https://github.com/gmanny/Pechkin However, I am unsure of how to integrate it into my p ...

How do I retrieve the download URL for the file created using Python in my Heroku App?

After developing my Flask App, I uploaded several files to the Heroku filesystem. I'm aware that these files are removed every time the dyno restarts. Now, in my HTML/JavaScript frontend, I'd like to provide users with a download button for thes ...

Convert JSON data into a nested unordered list

I need help converting a JSON object into an unordered list using jQuery. Here's the JSON data I have: var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3&bs ...

What is the best way to reduce the size of an image using a URL?

As I work on creating a website in React for a company, my main focus is on developing a drive repository where users can upload files. One issue that has arisen is the performance of the "photos" folder, as it contains numerous high-resolution images th ...

Struggling to align a button in the middle of an HTML form using flexbox - see code snippet below

Hey everyone, I’m having trouble with centering my button within the flexbox container with the class "hero". Any thoughts on why this might be happening? The button appears below the email form but is aligned to the left of it (starting at the same pos ...