Create a stylish Bootstrap 4 layout with a scrollable row that elegantly fills the remaining height

In Bootstrap 4, I want to create a row that fills up the remaining height of the page without extending past its designated space. The content should be scrollable using buttons, preferably with no visible scrollbar.

I have attempted to break down my layout like this. Please feel free to correct me as this is not my area of expertise.

JSFiddle

HTML:

<!doctype html>
<html lang="de">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

       <link rel="stylesheet" type="text/css" href="/library/bootstrap-4.1.0/css/bootstrap.min.css">
       <link rel="stylesheet" type="text/css" href="/library/fontawesome-5.0.10/css/fontawesome-all.min.css">
       <link rel="stylesheet" type="text/css" href="/css/screen/presentation.css"/>

       <title>Test</title>
   </head>
   <body>
    <!-- Your HTML code goes here -->
   </body>
</html>

CSS:

/* Your CSS code goes here */

JS:

// Your JavaScript code goes here

Thank you for your assistance!

htmlcssflexboxbootstrap-4

Answer №1

I encountered a similar issue and found a solution: Flexbox height issue with nested flex-grow boxes in Bootstrap 4

Instead of using the h-100 class that forces containers to be 100% of viewport height, you can utilize the Bootstrap 4.1 flex grow utilities...

  • Use flex-grow-1 to fill the remaining height of the flex container.
  • Apply flex-shrink-0 to prevent other rows from squishing when needed.

Add overflow:auto on the appropriate div for scrolling functionality.

Check out the demo here:

Below is a template that solely uses Bootstrap classes:

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            ...
        </ul>
    </div>
    <div id="page-content-wrapper" class="min-vh-100 p-0 d-flex flex-column overflow-hidden">
        <div class="container-fluid d-flex flex-column overflow-auto flex-fill">
            <div class="row flex-shrink-1">
                <div class="col">
                    <a href="#menu-toggle" class="btn btn-light" id="menu-toggle"><i class="fas fa-bars fa-2x"></i></a>
                </div>
            </div>
            <div class="container flex-fill flex-column d-flex">
                <div class="row flex-shrink-0">
                    <div class="col headline-col bg-warning">
                        <h5 class="align-middle">Headline 1</h5>
                    </div>
                </div>
                <div class="section-div flex-grow-1 flex-column d-flex">
                    <div class="row flex-shrink-0 bg-success">
                        <div class="col py-1">
                            <h5>Subtitle 1</h5>
                        </div>
                    </div>
                    <div class="row flex-fill bg-danger d-flex">
                        <div class="col overflow-auto flex-shrink-1 position-relative">
                            <div class="position-absolute">
                                <h5>Subtitle 2</h5>
                                <p> ... content </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container flex-shrink-1">
                <div class="row">
                    <div class="col last-col bg-success text-right"> This should always be at the bottom of the page.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

Zim presented a simplified solution:

<html class="h-100">
<body class="h-100">
    <div class="h-100 d-flex flex-column">
        <div style="background: lightblue;">
            top
        </div>
        <div class="flex-grow-1 overflow-auto" style="background: lightgreen;">
            bottom
        </div>
    </div>
</body>
</html>

https://i.sstatic.net/xeWKL.jpg

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

Showing database table entry that corresponds to WordPress post ID

Seeking guidance on a project. I have created a website for a volleyball club using Wordpress and am collecting player profile data through a Google form/spreadsheet, which I then save as a .csv file and import into a custom table named 'profiles&apos ...

phphtmlmysqlwordpress

Show the HTML content fetched from the database using PHP

After pulling html source code from a database and storing it in a PHP variable, I noticed that the content consists of table rows structured like this: <tr><td>10:00 AM</td><td class="success">Available</td></tr> < ...

phphtml

Implementing change event to activate select dropdown with jQuery

Is there a way to modify the code so that select2 and select3 are disabled by default, but become enabled only when an option is selected in the previous select dropdown (excluding the placeholder "Select your option")? In addition, I want the first place ...

javascriptjqueryhtml

Creating a customized design for a q-popup-edit

As I navigate through using Quasar in Vue, I stumbled upon a q-popup-edit that allows me to gather input from the user. Despite my attempts at researching via Google and reading documentation, I have hit a roadblock when it comes to customizing the style o ...

cssvue.jsquasar

Troubleshooting the Unresponsive Bootstrap Carousel

My first question may seem simple, but I've been struggling with it for 1-2 hours and scouring Stack Overflow for answers. The solution is probably really easy, but I just can't seem to find it. Any help would be greatly appreciated: <section ...

jqueryhtmltwitter-bootstrap

Leveraging jQuery.css for retrieving values in Internet Explorer

I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...

jquerycssinternet-explorerinternet-explorer-11

Problem with Scroll Listener on Image in Angular 4: Window Scroll Functioning Properly

Hello, I am a newcomer who is currently working on creating a small application that allows users to zoom in on an image using the mouse scroll. <img (window:scroll)="onScroll($event) .....></img> The code above works well, however, it detec ...

javascripthtmlangularscroll

Spontaneous visual paired with text upon refreshing

I am new to Java script and I am working on creating a web page that displays two random numbers every time it is refreshed. Depending on these numbers, specific text should be shown. These numbers are represented by images ranging from 0 to 5. Currently ...

javascripthtmlarraysrandomtext

Personalized button utilizing Bootstrap 4

Seeking assistance to create a button with a 3D effect. I want to mimic the appearance of this button: https://i.sstatic.net/9sFs5.png Currently using Bootstrap to generate a button using this code: <button type="button" class="btn btn-primary">Gam ...

htmlcssbootstrap-4

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

htmlcsstwitter-bootstrap

Exporting HTML content into an Excel spreadsheet while ensuring that the leading is

public void ConvertHtmlToExcel(string htmlContent, string fileName, out string errorMessage) { errorMessage = ""; try { fileName = fileName == "" ? "Exp ...

c#html.netexcel

What is the best way to shift all elements to the right side except for 'tindog'?

https://i.sstatic.net/hAUps.png <nav class="navbar navbar-expand-lg navbar-dark "> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="button" data-t ...

htmlcssbootstrap-4navbar

Embed a webpage link or interactive hotspot within an equirectangular panorama using Three JS

I am seeking a comprehensive guide, tutorial, or extensive documentation on how to embed a hyperlink within an equirectangular panorama using Three.js. Utilizing the equirectangular panorama demo, I aim to learn how to insert elements like circles or vari ...

javascripthtmlthree.js

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

javascriptcssvue.jsresizescrollable

Utilizing AJAX to dynamically update a div's content by extracting a specific div from the retrieved data

Although I believe my code is correct, I am not very familiar with AJAX and have been struggling for hours to get it right. I've tried various approaches, including using filters, but nothing seems to work. The issue I'm facing is that the chat m ...

javascriptjqueryhtmlcssajax

What steps can be taken to enable users to send and receive messages on my chat website?

I just completed creating a chat website using HTML, CSS, JavaScript, and jQuery and have now published it. You can view it at However, the site still lacks the functionality that would allow users to send and receive messages through it. Can anyone prov ...

javascriptjqueryhtmlcss

Is there a way to display multiple Bootstrap 5 modals simultaneously without automatically closing the previous ones?

My current project utilizes bootstrap 5.2, which is a departure from the previous version, bootstrap 3. In bootstrap 3, it was possible to open multiple modals on top of each other, creating an overlapping effect. However, in bootstrap 5 and 5.2, the behav ...

csstwitter-bootstrapbootstrap-modalbootstrap-5

Rearrange element's placement using Jquery Drag & Drop

I am experiencing difficulties in positioning my elements after a drop event. Within my "list" of divs... In order to keep the divs together and update the list, I utilize jQuery's append function to move the element from the list to its designated ...

javascriptjquerycss

Show active Main Menu and sub Menu through the use of CSS and javascript

I currently have left side menus. <div class="panel"> <div class="panel-heading panel-red" role="tab" id="headingDash" style=""> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expa ...

javascriptjqueryhtmlcss

Can combinators be applied to select elements containing options?

How can I use a select dropdown menu to toggle the appearance of a text input field? Specifically, when the option with a value of '4' is chosen, the text input should become visible. Here is the code snippet: HTML <div class="paren ...

htmlcss-selectors