Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Question

Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Striving to achieve a specific design in Bootstrap, but hitting roadblocks.

The criteria are as follows:

No scrolling in the browser window.
Display occupying 100% of browser height.
Columns for Menu, Left contents, and Right contents must scroll independently.

My envisioned layout resembles this image

Here's my current code snippet:

html,body{height:100%; color: white;}
.bg-purple { background: rgb(48,0,50); }
.bg-gray { background: rgb(74,74,74); }
.bg-blue { background: rgb(50,101,196); }
.bg-red { background: rgb(196,50,53); }
.bg-green { background: rgb(50,196,53); }

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-2 bg-gray h-100" style="overflow-y: auto;">
            menu<br />menu<br />menu
        </div>
        <div class="col-10 bg-green h-100">
            <div class="container-fluid h-100 d-flex flex-column">
                <div class="row justify-content-center bg-purple flex-shrink-0">
                    MY HEIGHT SHOULD CHANGE<br />BASED ON CONTENT.<br />NO ABSOLUTE HEIGHT SETTINGS.
                </div>
                <div class="row justify-content-center flex-grow-1 mh-100">
                    <div class="col bg-blue mh-100" id="left" style="overflow-y: auto;">
                        <p><strong>THIS AREA SHOULD SCROLL INDEPENDENTLY</strong></p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents END</p>
                     </div>
                     <div class="col bg-red mh-100" id="right" style="overflow-y: auto;">
                         <p><strong>THIS AREA SHOULD SCROLL INDEPENDENTLY</strong></p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents END</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

css twitter-bootstrap

Answer 1

Answer №1

Here is an example to consider:

$(function(){
  $(".scrollableDiv").css("max-height", "calc(100vh - " + $("#header").height() + "px)")
})

#container{
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4aab4aab7f8ffeefba8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>html,body{height:100%; color: white;}
.bg-purple { background: rgb(48,0,50); }
.bg-gray { background: rgb(74,74,74); }
.bg-blue { background: rgb(50,101,196); }
.bg-red { background: rgb(196,50,53); }
.bg-green { background: rgb(50,196,53); }
</style>
<div class="container-fluid" id="container">
    <div class="row h-100">
        <div class="col-2 bg-gray h-100" style="overflow-y: auto;">
            menu<br />menu<br />menu
        </div>
        <div class="col-10 bg-green h-100">
            <div class="container-fluid h-100 d-flex flex-column">
                <div class="row justify-content-center bg-purple flex-shrink-0" id="header">
                    MY HEIGHT SHOULD CHANGE<br />BASED ON CONTENT.<br />NO ABSOLUTE HEIGHT SETTINGS.
                </div>
                <div class="row justify-content-center flex-grow-1">
                    <div class="col bg-blue scrollableDiv" id="left" style="overflow-y: auto;">
                        <p><strong>THIS AREA SHOULD SCROLL INDEPENDENTLY</strong></p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents END</p>
                     </div>
                     <div class="col bg-red scrollableDiv" id="right" style="overflow-y: auto;">
                         <p><strong>THIS AREA SHOULD SCROLL INDEPENDENTLY</strong></p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents END</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

Here is an example to consider:

$(function(){
  $(".scrollableDiv").css("max-height", "calc(100vh - " + $("#header").height() + "px)")
})

#container{
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4aab4aab7f8ffeefba8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>html,body{height:100%; color: white;}
.bg-purple { background: rgb(48,0,50); }
.bg-gray { background: rgb(74,74,74); }
.bg-blue { background: rgb(50,101,196); }
.bg-red { background: rgb(196,50,53); }
.bg-green { background: rgb(50,196,53); }
</style>
<div class="container-fluid" id="container">
    <div class="row h-100">
        <div class="col-2 bg-gray h-100" style="overflow-y: auto;">
            menu<br />menu<br />menu
        </div>
        <div class="col-10 bg-green h-100">
            <div class="container-fluid h-100 d-flex flex-column">
                <div class="row justify-content-center bg-purple flex-shrink-0" id="header">
                    MY HEIGHT SHOULD CHANGE<br />BASED ON CONTENT.<br />NO ABSOLUTE HEIGHT SETTINGS.
                </div>
                <div class="row justify-content-center flex-grow-1">
                    <div class="col bg-blue scrollableDiv" id="left" style="overflow-y: auto;">
                        <p><strong>THIS AREA SHOULD SCROLL INDEPENDENTLY</strong></p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents END</p>
                     </div>
                     <div class="col bg-red scrollableDiv" id="right" style="overflow-y: auto;">
                         <p><strong>THIS AREA SHOULD SCROLL INDEPENDENTLY</strong></p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents END</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Answer №1

Similar questions

Add a hyperlink alongside every row in the table

What is the best way to add an ellipsis to the conclusion of a paragraph using .dotdotdot?

Is it acceptable to debut a full-screen iframe widget compared to an embedded one?

Is there a way to position the text within an email body at the center using SendGrid?

What are the steps to make a div with no content inside?

Updating the background image with Jquery is resulting in a distracting flicker effect

With FlexLayout, the content compresses rather than shrinking and taking up the entire width

Creating various iterations of a single CSS animation

Setting a CSS Variable with the Help of jQuery

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

Retrieve the ID of the image element using Jquery from a collection of images within a div container

encase the text within a div to create a visual flow

Angular2 Components with Unique Styling

Manipulating text alignment and positioning in CSS

divs aligned at the same vertical position

Enhance your web forms with jQuery Chosen's automatic formatting feature

Adjust image source based on media query (CSS or JavaScript)

When I hover my mouse over the items on the Navigation bar, they shift forward

Issue with the MUI Autocomplete display in my form

having difficulty applying border color to input when clicked