Create a scrollable right column in Bootstrap 4 that maximizes the use of vertical space

My Bootstrap 4 layout consists of a simple two-column structure:

<main>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column</p>
            </div>
            <div class="col-md-9">
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
                <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            </div>
        </div>
    </div>
</main>

I am looking to have the right column always reach the bottom of the screen and be vertically scrollable. Sometimes the content in the right column will only take up a small portion of the screen, while other times it may overflow with numerous paragraphs.

UPDATE: I want to clarify that I need the right column to extend down to the viewport's bottom.

  • The layout also includes elements such as nav above the main, with dynamic heights
htmlcssbootstrap-4

Answer №1

To ensure your right column always stretches to the full length of the available page size and displays a vertical scroll when needed, you can apply two css properties. Check out the sample code below:

<div class="col-md-9" style="height: 100vh; overflow-y: auto;">

For a live example, visit this sandbox link: https://codesandbox.io/s/bootstrap-4-scroll-example-stackoverflow-0gdht

Answer №2

The query lacks clarity regarding mobile expectations. I assume you aim for a scrollable right column independent of the body to keep the navigation fixed at the top. I also assume the left sidebar should be independently scrollable as needed.

My suggestion is to ensure that position:absolute is responsive:

/* 768 is considered the medium breakpoint */
@media (min-width: 768px) {
    .position-md-absolute {
        position: absolute;
    }
}

Furthermore, you can utilize Bootstrap utility classes to achieve the desired layout:

  <body class="d-flex flex-column min-vh-100">
    <nav class="navbar">
        ...
    </nav>
    <main class="d-flex flex-column flex-fill">
        <div class="container-fluid d-flex flex-column flex-fill">
            <div class="row flex-fill flex-column flex-md-row">
                <div class="col-md-3 overflow-auto">
                    <div class="position-md-absolute">
                        ..
                    </div>
                </div>
                <div class="col-md-9 overflow-auto flex-fill">
                    <div class="position-md-absolute">
                        ..
                    </div>
                </div>
            </div>
        </div>
    </main>
  </body>


/* 768 is the medium breakpoint */
@media (min-width: 768px) {
    .position-md-absolute {
        position: absolute;
    }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f4ebf4f4e1f6aaeef7c4b5aab5b2aab4">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<body class="d-flex flex-column min-vh-100">
  <nav class="navbar navbar-light bg-info">
<a class="navbar-brand" href="#">Nav</a>
</nav>
<main class="d-flex flex-column flex-fill">
<div class="container-fluid d-flex flex-column flex-fill">
    <div class="row flex-fill flex-column flex-md-row">
        <div class="col-md-3 overflow-auto">
            <div class="position-md-absolute">
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column</p>
                <p>Left column last</p>
            </div>
        </div>
        <div class="col-md-9 bg-info overflow-auto flex-fill">
            <div class="position-md-absolute">
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <p>Right column last... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            </div>
        </div>
    </div>
</div>
</main>
</body>

Demo: https://codeply.com/p/93751rK5WQ

Answer №3

To ensure that a single tag takes up the full width without affecting other tags, you can set that tag to have absolute positioning.

  <div class="col-md-9" style="position:absolute;bottom:0;right:0;top:0;overflow-y: auto">

This will prevent any disturbance to the layout of other tags on the page.

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

Personalize your @mui TextField by adjusting the type to "number" and adding

Utilizing the library https://mui.com/material-ui/, I am importing the TextField component. My goal is to customize it to match this design: enter image description here The challenge I am facing includes: Ensuring the up/down arrows are always vis ...

cssreactjsmaterial-ui

JavaScript encounters an Access Denied error when attempting to read data from a JSON file in

My code is experiencing issues on IE browser and Chrome, but works perfectly on FireFox. var currentPage = 1; var max = 0; var myList = []; var links = []; $.ajax({ cache: false, type : 'GET', crossDomain: true, ...

javascripthtmljsonajaxinternet-explorer

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

javascripthtmlcssangulartypescript

Ways to show just three buttons in a row using Bootstrap?

form{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-around; } form .buttons{ width: 100%; border: none; background-color: #ffffff00; cursor: pointer; } form .buttons img{ widt ...

phphtmlcssbootstrap-4

Arranging Bootstrap Columns. Tips for displaying all 'col' elements in a single row based on screen size

Is there a way to keep these images in a single row without them spilling over to a second row? The current setup stacks the images side by side, but I'd like them to stay in one row regardless of the window size or the number of images per row (rangi ...

bootstrap-4rowcol

What is preventing me from assigning all padding values at once?

I attempted to modify all paddings of the html element using JavaScript, with the following code: const pd = 1 document.getElementsByClassName('board')[0].style.paddingRight = pd + 'px' document.getElementsByClassName('board') ...

javascripthtml

When I attempt to press the shift + tab keys together, Shiftkey is activated

Shiftkey occurs when attempting to press the shift + tab keys simultaneously $("#buttonZZ").on("keydown",function (eve) { if (eve.keyCode == 9 && eve.shiftKey) { eve.preventDefault(); $("#cancelbtn").focus(); } if (eve. ...

javascriptjqueryhtml

How can I create a new PHP table using data from an existing table?

I have a table displayed on my website with the code snippet providedview the table image here Here is the code for generating this table: <?php $query = $db->query("SELECT * FROM bit_exchanges ORDER BY id DESC LIMIT 20"); if($query-> ...

javascriptphpjqueryhtmlmysql

Is it possible to invoke fancybox using a class selector?

I'm having trouble using fancybox on an element with this code: $(this).parent().parent().parent().find('.comments').fancybox(); Is it not feasible? Could it be because it's a class and not an id? I have multiple rows of items, so as ...

javascriptjquerycssfancybox

Fixed Navbar at the top of the page with no elements underneath

Currently, I am working on creating a sticky navbar for a school project website. You can check out the site here: I am aiming to ensure that the content does not overlap with the navbar when scrolling. I want the content to appear beneath the navbar as i ...

jquerycsstwitter-bootstrapsticky-footer

Ensure the uniform width of columns within the Grid component in React

I am facing an issue with a grid list where the columns have different widths due to varying text lengths. Is there a way to make the column widths equal, ignoring the text length? https://i.sstatic.net/SZRxK.png <Container> {elements.map((e, i) ...

javascripthtmlcssreactjsgrid

Exiting the browser in the Intel XDK to switch back to the application

Currently working on a small app using Intel XDK. I have successfully implemented code to open an external browser window with the function below. However, I am now facing difficulties in trying to figure out how to close this browser window and return b ...

javascripthtmlintel-xdk

Lose the scrollbar but still let me scroll using the mouse wheel or my finger on the fullscreen menu

I am currently working on a fullscreen menu design. However, when the menu appears, some elements are not visible unless I apply the overflow-y: scroll property to the menu. But I don't like the appearance of the additional scrollbar that comes with i ...

htmlcss

Assign a new class to the child element of **this**

Can you please explain how to apply a class to the child elements of this? I am looking to give a different background color to all Compliant items. For example: <div class="tab"> <tr><td class="compliance">Compliant</td>< ...

jqueryhtmlcss

Centering "Label - Value" without tables in web design

It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...

htmlcsstabular

The navigation bar fails to resize when the browser window is adjusted

Currently working on Ruby on Rails development and utilizing the Twitter Bootstrap navbar. Encountering an issue where the navbar is not resizing in Firefox when I try to shrink the window size. Does anyone have a solution to this problem? Here is my co ...

htmlcssruby-on-railstwitter-bootstrapnavbar

Using jQuery to trigger a click event on the current index

Look at the HTML code snippet below: <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> <li>Item5</li> <li>Item6</li> <li>Item7</li ...

jqueryhtmlonclickclickindexof

Transitioning to a bootstrap or fluid design from a foundation of simple HTML and CSS

Although I am not a web designer by trade, I have a background in statistics and am currently working on building a website. I have sketched out the layout structure I desire using basic html and simple css to kick things off. However, upon further explora ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Transform a div's style when hovering over another div using absolute positioning without repetition

I am facing an issue with multiple divs positioned absolutely on top of a primary div with relative positioning. I want one specific div to change its background-color when hovering over another div within the same parent div. Though I know about ad ...

javascriptjqueryhtmlcss

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

htmljsondojoxmlhttprequest