Creating a responsive card layout in Bootstrap 4 that utilizes the vertical space of the viewport with a scrollbar

We are working on a page that has specific requirements:

  1. The page should not have a scroll bar.
  2. The card must expand vertically to fill the remaining space, even if there is no content in the card-body.
  3. We need a scroll bar for the card-body only when the content is too long.

We are finding it challenging to meet all requirements without using a fixed height because it would violate the second requirement!

<!doctype html>
<html lang="en">
...

Your assistance would be greatly appreciated. Thank you!

htmlcssbootstrap-4

Answer №1

To make your content scrollable, you can utilize the calc() function in CSS and apply the predefined overflow-auto class to the card-body div. This way, if the content exceeds the available space, a scrollbar will automatically appear.

For more information, you can refer to the following links:
https://www.w3schools.com/cssref/func_calc.asp
https://getbootstrap.com/docs/4.6/utilities/overflow/

body {
  padding-top: 5rem;
}
.card-fill{
  height: calc(100vh - 5rem - 1rem); /*reduce padding-top 5rem of body and 1rem for bottom gap*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd4c9c789ffc8d4ccf4d1e7c1cbdc88c0cfc3">[email protected]</a>/dist/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
                   aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<main role="main" class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card card-fill shadow-sm">
                <div class="card-header">
                    Featured
                </div>
                <div class="card-body overflow-auto">
                    <p>
                        [Your Unique Content Here]
                    </p>
                </div>
            </div>
        </div>
    </div>
</main>

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 process for connecting a Google font to my Nuxt project files?

Recently delving into SCSS, I've been working on loading a local font into my SCSS file. Oddly enough, while it works perfectly fine in a CSS file, in a SCSS file it doesn't show anything at all, not even an error message: @font-face { font-fa ...

cssvue.jssassnuxt.js

Having issues with a drop-down in Bootstrap. Is there anyone who can assist in getting it to function

I recently implemented a drop-down menu on the top navigation of my website. However, after applying Bootstrap to one of my pages, the drop-down menu stopped functioning properly. Below is the code that was applied: <link href="https://cdn.jsd ...

javascripthtmlcssbootstrap-5

Experiencing a 500 internal server error while running my Python script, struggling to identify the root cause

Here is a python script designed to open a .ssv file (space-separated vector) and create a survey page based on the file's contents. The .ssv file includes the survey name and the questions to be asked in the survey. As part of our project, each team ...

pythonhtmlcgi

Encountering a problem with the multi-page template structure in jQuery Mobile

As a newcomer to Phonegap, I am utilizing jQuery Mobile and HTML5 for the development of an Android app. The app consists of three pages: the first page, index.html, displays a list of contents; the second page holds text content as well as a header with b ...

androidhtmljquery-mobilecordova

The periodLookup array does not have a defined value for periodStr. Why is this error being caught?

Here is a method that I am working with: set_period_help_text: function(periodInput){ var metric = MonitorMetric.getSelectedMetric(); var periodStr = $('select[name=metric_period]').val(); var datapoints = Number(periodIn ...

javascripthtml

incorporating a timer into a JavaScript game

I am currently working on a memory card game where I want to include a stopwatch feature. I'm looking to display the time elapsed from when the user selects the first card until they win. However, I am struggling with keeping the stopwatch running smo ...

javascripthtml

Epiphany poses a challenge when it comes to adjusting the height of a child item to match the height of a flex item using Flex

I am facing an issue with a grid of blocks that also contain flex blocks. The height is being ignored in the children of the flex-item of the grid in the Epiphany browser. The display is correct in Firefox and Chromium. In Epiphany, the first block appea ...

htmlcssflexboxwebkitepiphany

Troubleshooting: Magento checkout page keeps scrolling to the top

We are experiencing an issue where, during the one page checkout process, the next step is not automatically scrolling to the top of the page when it loads. After a user fills out all their billing information and clicks continue, the next step appears ha ...

javascriptjqueryhtmlcssmagento

Apply a border around every digit within a division

Is there a way to add a border to each individual number within a div? I already know how to add a border to a div as a whole, but I specifically want each number inside the div to be bordered. For example: <div id="borders">12345</div> The ...

phpcssstring

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

javascripthtmldom

What is the best way to create spacing between images in a CSS image slider?

UPDATE: I've made significant progress by modifying the code provided in the link below. I am very close to achieving my desired result, but there are parts of it that still puzzle me. The transition now has spacing on both sides and the hidden space ...

htmlcssoptimizationslideshow

Tips for creating custom CSS to target a specific element within a group of similar elements

My cssSelector for locating elements is div.formErrorContent. There are 4 matched elements, but I need to pinpoint the first element. Can anyone assist me with this? I am aware of how to write the xpath code for this: (//div[@class='formErrorContent ...

cssselenium-webdriver

Unusual css glitch observed when hovering over a span/link

Currently, I'm struggling with a CSS code issue. My goal is to have the div #hidden show when someone hovers over the link in #trigger. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ...

htmlcss

Save React code as a single HTML file

My current project involves creating one-page websites for a specific service that only accepts single inline HTML files. To make these webpages as modular as possible, I am utilizing React to create ready components. The challenge is exporting the final R ...

javascripthtmlreactjswebpacknext.js

Configuring express for serving static CSS and JavaScript files

I'm currently facing issues with setting up the middleware of my application to serve static files like css and js. My goal is to include css and js files from the public directory in my index.html. You can view the current file structure here Below ...

htmlnode.jsexpress

The PrimeNG confirmation dialog (Overlay) does not come with any default styling (CSS)

I implemented a PrimeNG confirmation dialog based on the example from their official documentation: component.html <p-confirmDialog appendTo="body" #cd> <p-footer> <button type="button" pButton class="btn btn-primary btn-norma ...

cssangularprimeng

Is it possible to create a unique version of Bootstrap by utilizing webpack/Laravel Mix?

Having trouble compiling a custom build of Bootstrap 4 with webpack. Bootstrap 4 directory: /node_modules/bootstrap/scss Created my own app.scss file to import specific parts of Bootstrap: @import "variables"; @import "mixins"; @import "custom"; .... ...

laravelwebpackbootstrap-4laravel-mix

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

htmlcss

Utilize SVGs efficiently by loading them once and reusing them

Is it possible to use the same SVG element twice on a web page without having to load it again? I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object. Both instance ...

javascripthtmlcsssvg

Positioning a footer at the absolute bottom of a webpage

I am currently working with 2 divs that are absolutely positioned within a relative container. I intend to utilize JavaScript for toggling visibility. .container { position:relative; } .section1 { position:absolute; top:0; left:0; right:0; ...

htmlcss