Is there a way to adjust the height of a "row" element in CSS Bootstrap to match the height of its embedded div?

I have a basic website using Bootstrap CSS.

<!DOCTYPE html>

<html lang="en">

    <head>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eff2ed">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
                        
        <style>
        
                /* width */
                ::-webkit-scrollbar {
                    width: 5px;
                }

                /* Scrollbar background */
                ::-webkit-scrollbar-track {
                    background: rgb(244, 244, 244);
                }

                /* Scrollbar handle */
                ::-webkit-scrollbar-thumb {
                    background: rgba(200, 200, 200, 12);
                }

                /* Scrollbar handle on hover */
                ::-webkit-scrollbar-thumb:hover {
                    background: rgb(80, 20, 160);
                }
                
                
                p, ul {
                    font-family:Consolas;
                    padding:1%;
                    font-size:12px
                }
                
                footer {
                    text-align:center;
                    font-size:10px;
                }
                
                
                #scrollablediv {
                    overflow-y: scroll;
                    height:50%;
                }

                
                /* Making images black-and-white and colourful when hovered. */
                img {
                    -webkit-filter: grayscale(100%);
                    -moz-filter: grayscale(100%);
                    filter: grayscale(100%);
                    transition: all .5s ease;
                }       
                img:hover {
                    -webkit-filter: grayscale(0%);
                    -moz-filter: grayscale(0%);
                    filter: grayscale(0%);
                }       
        </style>
        
    </head>

    <body style="margin:.2%; padding:3%; height: 70px">

        <header>
            <h1 style="font-family:consolas; font-size:18px">Header here!</h1>
        </header>
    
        <hr>
                
        <div class="row">
        
            <div class="col-lg-2">
            </div>
        
            <div class="col-lg-10">
                <div id="scrollablediv">
                    <h6>Title1</h6>
                    <p>
                        <b>TL;DR:</b> Some text..
                        <br><br>
                        <b>TS;WM:</b> Some text..
                    </p>

                    <h6>Title2</h6>
                    <p> Some text..
                    </p>

                    <h6>Title3</h6>
                    
                    <ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
                        <li>
                            Some text..
                        <li>
                        <li>
                            Some text..
                        <li>
                    </ul>                       
                
                    <h6>Title4</h6>
                    <p>
                        Some text..
                    </p>
            
                    <h6>Title5</h6>
                    <p>
                        Some text..
                    </p>

                    <h6>Title6</h6>
                    
                    <ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
                        <li>
                            Some text..
                        <li>
                        <li>
                            Some text..
                        <li>
                    </ul>   
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <footer>© 2022.</footer>
            </div>
        <div class="row">

        <script src="bootstrap-5.2.2-dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

On larger screens, the 

<div class="row">
element becomes very tall, causing its child elements (cols) to stretch accordingly.

If you observe the website, you'll see that the scrollablediv element's height is not as large, but its parent row element is excessively tall. I am seeking a way to make a container row the same size as its children columns.

How can this be achieved?

htmlcssbootstrap-4

Answer №1

Hopefully, this solution works for you!

To implement the desired functionality, make sure to include the class align-items-start in the main row. Additionally, remember to set the height of the scrollable div using pixels (px) instead of percentages (%).

/* Custom scrollbar styles */
                ::-webkit-scrollbar {
                    width: 5px;
                }
    
                ::-webkit-scrollbar-track {
                    background: rgb(244, 244, 244);
                }
    
                ::-webkit-scrollbar-thumb {
                    background: rgba(200, 200, 200, 0.12);
                }
    
                ::-webkit-scrollbar-thumb:hover {
                    background: rgb(80, 20, 160);
                }
           
                /* Additional CSS styling */
                p, ul {
                    font-family: Consolas;
                    padding: 1%;
                    font-size: 12px;
                }
                
                footer {
                    text-align: center;
                    font-size: 10px;
                }
                
                #scrollablediv {
                    overflow-y: scroll;
                    height: 300px;
                }
                
                img {
                    -webkit-filter: grayscale(100%);
                    -moz-filter: grayscale(100%);
                    filter: grayscale(100%);
                    transition: all 0.5s ease;
                }
                img:hover {
                    -webkit-filter: grayscale(0%);
                    -moz-filter: grayscale(0%);
                    filter: grayscale(0%);
                } 
<body style="margin: 0.2%; padding: 3%; height: 70px">

        <header>
            <h1 style="font-family: consolas; font-size: 18px">Header here!</h1>
        </header>
        
        <hr>
                    
        <div class="row align-items-start">
            
            <div class="col-lg-2">
            </div>
            
            <div class="col-lg-10">
                <div id="scrollablediv">
                    <h6>Title1</h6>
                    <p>
                        <b>TL;DR:</b> Some text..
                        <br><br>
                        <b>TS;WM:</b> Some text..
                    </p>
    
                    <h6>Title2</h6>
                    <p> Some text..
                    </p>
    
                    <h6>Title3</h6>
                    
                    <ul style="font-family: Consolas; font-size: 12px; list-style-position: inside;">
                        <li>
                            Some text..
                        </li>
                        <li>
                            Some text..
                        </li>
                    </ul>                       
                            
                    <h6>Title4</h6>
                    <p>
                        Some text..
                    </p>
                    
                    <h6>Title5</h6>
                    <p>
                        Some text..
                    </p>
    
                    <h6>Title6</h6>
                    
                    <ul style="font-family: Consolas; font-size: 12px; list-style-position: inside;">
                        <li>
                            Some text..
                        </li>
                        <li>
                            Some text..
                        </li>
                    </ul>   
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <footer>© 2022.</footer>
            </div>
        </div>
        <script src="bootstrap-5.2.2-dist/js/bootstrap.bundle.min.js"></script>
    </body>

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

"putting into a state of freezing" an entry field

My <input type="text" /> element needs to stop accepting text at a certain point. However, I'm unable to change the type to type="button" for some reason. What is the best way to make my <input> element stop accepting text? ...

jqueryhtmljquery-ui

Does adjusting the background transparency in IE8 for a TD result in border removal?

I attempted to create a JSFiddle, but it was not coming together as expected. My goal is to change the color of table cells when hovered over. I have been trying to adjust the opacity of the background color for this effect, but I encountered some strange ...

jqueryhtmlcssinternet-explorer

When scrolling, a new page loads seamlessly

Recently, I came across a website that has an interesting feature where new content is loaded automatically while scrolling, seamlessly appending to the existing page. What's more fascinating is that not only does the content change, but the URL also ...

javascripthtmlcssweb-applications

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Trimming whitespace from strings within HTML tag attributes can be achieved using various methods

I have been reviewing the .cshtml pages of a website with the aim of adding ID attributes to various divisions and elements for testing purposes. These pages utilize AngularJS, and many of the elements I need to add ID attributes to are part of a list tha ...

javascripthtmlangularjsstringwhitespace

The font styles shift and vertical bars vanish when placed under images

I'm currently facing some challenges with the text placement beneath the images on my website that I am constructing: 1) The font for "Back to home page" unexpectedly changes from the specified style (Georgia, 0.9em) in Firefox but remains consistent ...

cssimagefonts

HTML div feedback container with directional pointer

I've been working on creating a comment box with an arrow using CSS, but I'm facing a particular challenge. My comment box has a white background, and in order to make it stand out, I need to add a border. However, I'm struggling with addin ...

csshtml

Angular2 charts rendered with highcharts may not adjust their height according to the parent container

Struggling to display charts using angular2-highcharts due to the chart not inheriting the parent div's height. Any suggestions on how to fix this issue? If you'd like to take a look, here is the plunker link: https://plnkr.co/edit/tk0aR3NCdKtCo ...

csshighchartsangular

Unable to utilize static files in node.js and express

Attempting to utilize node.js and express for crafting a chat client has proven to be a bit challenging. Whenever I attempt to incorporate external CSS or JS files, I encounter GET errors. My current configuration in index.js is as follows: var express = ...

javascripthtmlcssnode.jsexpress

Is it possible for a "position:absolute" div to maintain its relative width?

Imagine having two nested divs like the following: <html> <body> <div id="outer" style="width:50%"> <div id="inner" style="width:100%"> </div> </div> </body> </html> Currently, the i ...

htmlcsspositionabsolute

Display the div only during the printing process

Imagine I have a situation where there is a block of content that I only want to show when printing. It looks something like this: <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div&g ...

javascripthtmlcss

Exploring numerous choices within a multi-select "category" search bar (web scraping)

Looking to scrape data from this French website using Python and the bs4 library: the content is in french :) . Specifically interested in extracting all possible values of a multi-select search bar named 'TYPE DE BIENS'. This type of search bar ...

javascripthtmlselenium-webdriverweb-scraping

`Is there a way to access nested href elements in Python?`

Objective (I have to perform the search multiple times): 1. Look up (e.g. "WP_000177210.1") in "" (i.e. ) 2. Choose the first entry in the "CDS Region in Nucleotide" column of the table (i.e. " NC_011415.1 1997353-1998831 (-)", ) 3. Click on "FASTA" ...

pythonhtmlhref

Adjustable Bootstrap Progress Bar - Modify element width on the fly

I have encountered an issue with my progress bars on the webpage. The static HTML version works perfectly fine, but the dynamically created one using jQuery seems to be instantly at 100% without any delay in progression. To illustrate the problem better, ...

javascriptjqueryhtmlcsstwitter-bootstrap

Include a tooltip on every image by utilizing the title attribute

<br><img title="Cool as ninja!" src="/images/profile2.png" width="300"></br> <br> <strong>Who's this pretty girl ninja!?</strong> <br><img title="Cool dude bro!" src="/images/profile5.png"></br> & ...

htmlcss

Switch between using the useState hook by toggling it with the MUI Switch

Looking to implement a custom Dark Mode feature for a specific element on my create-react-app website using MUI. I have successfully implemented the Switch to change the state on toggle, but I am having trouble figuring out how to toggle it back and fort ...

javascripthtmlcssreactjsmaterial-ui

What steps can be taken to resolve the field error problem in Django?

While attempting to move from the list page to the detail page, I encountered an error related to a field error. To address this, I added an empty Slug field in the models, but it resulted in a page not found error. https://i.sstatic.net/LCptK.png #urls ...

postgresqlbootstrap-4django-2.0

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

htmlcss

How can I create a consistent copy button function for an HTML table that works the same across different browsers like Firefox and Chrome?

I am encountering an issue where copying the second row of an HTML table to paste it in an Excel file works perfectly in Firefox, but not in Chrome. When pasting in Chrome, the cells do not match and only the HTML inside the table cells is retained. I am u ...

javascripthtmlvue.jsgoogle-chrome

The curious conduct of wild safari creatures

I have been using JavaScript to split my ePub chapter into pages by wrapping the code with new divs that represent separate pages. I have also created CSS styles for these new divs. Everything works perfectly when the file has a filename extension of &apos ...

javascripthtmlcssiossafari