Ways to make a DIV element extend to fill the height of its parent container

Need help with stretching two child DIVs in a Bootstrap 5 page to match the height of the parent DIV. Can anyone assist?

Here is the HTML: https://jsfiddle.net/og7pz9sq

I'm attempting to make the light-green and light-yellow DIVs fill the entire white area. The footer will always be positioned at the bottom of the page.

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

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f24392439">[email protected]</a>/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous">
</head>

<body>
    <div id="wholepage"
         style="min-height: 90dvh;">

        <div id="header">
            <div class="p-3 bg-primary text-white text-center">
                Bootstrap 5 Page
            </div>
        </div>

        <div id="topmenu">
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <div class="container-fluid">

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active"
                               href="#">Active</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"
                               href="#">Link</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <div id="sidebar-and-contents">

            <div class="row">

                <div id="sidebar"
                     class="col-md-auto"
                     style="display: inline;">

                    <ul class="nav nav-pills flex-column"
                        style="background-color: rgb(172, 201, 135);">
                        <li class="nav-item">
                            <a class="nav-link"
                               href="#">Link-Left1</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link"
                               href="#">Link-Left2</a>
                        </li>
                    </ul>
                </div>

                <div id="content"
                     class="col"
                     style="background-color: rgb(241, 240, 172);">

                    <div>Main area for dynamic contents based on menu selections</div>

                </div>

            </div>
        </div>

    </div>

    <div id="footer"
         class="mt-5 p-4 bg-dark text-white text-center">
        <p>Footer</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce1fce1">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>
</body>

</html>

Answer №1

To resolve this issue, the recommended approach is to move away from using #wholepage and instead utilize flexbox to expand the child elements.
Here's how you can achieve this:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

/* new */

#wholepage {
  display: flex;
  flex-direction: column;
}

#sidebar-and-contents {
  display: flex;
  flex-direction: column;
  flex: auto;
}

#sidebar-and-contents .row {
  flex: auto;
}

#sidebar {
  display: flex!important;
  flex-direction: column;
}

#sidebar .nav {
  flex:auto;
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4969b9b808780869584b4c1dac7">[email protected]</a>/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous">
</head>

<body>
    <div id="wholepage"
         style="min-height: 90dvh;">

        <div id="header">
            <div class="p-3 bg-primary text-white text-center">
                Bootstrap 5 Page
            </div>
        </div>

        <div id="topmenu">
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <div class="container-fluid">

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active"
                               href="#">Active</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"
                               href="#">Link</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <div id="sidebar-and-contents">

            <div class="row">

                <div id="sidebar"
                     class="col-md-auto"
                     style="display: inline;">

                    <ul class="nav nav-pills flex-column"
                        style="background-color: rgb(172, 201, 135);">
                        <li class="nav-item">
                            <a class="nav-link"
                               href="#">Link-Left1</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link"
                               href="#">Link-Left2</a>
                        </li>
                    </ul>
                </div>

                <div id="content"
                     class="col"
                     style="background-color: rgb(241, 240, 172);">

                    <div>Main area for dynamic contents based on menu selections</div>

                </div>

            </div>
        </div>

    </div>

    <div id="footer"
         class="mt-5 p-4 bg-dark text-white text-center">
        <p>Footer</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219041904">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>
</body>

</html>

Answer №2

If you want to anchor the footer to the bottom of the page and allow the middle section to expand and fill the available space, you can utilize a vertical flex box layout. Add d-flex flex-column to the parent containers (wholepage and sidebar-and-contents).

For responsiveness, especially when switching to a different layout at the media query break point md, consider including flex-column flex-md-row in the sidebar-and-contents container to ensure the content expands correctly on smaller screens.

Here's an example that showcases the implementation (excluding extra padding and margins for clarity):

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e99c879a879b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div id="wholepage" style="min-height: 90dvh;" class="d-flex flex-column">
  <div id="header">
    <div class="p-3 bg-primary text-white text-center">
      Bootstrap 5 Page
    </div>
  </div>
  <div id="topmenu">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">

        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <div id="sidebar-and-contents" class="d-flex flex-column col">
    <div class="row col me-0 flex-column flex-md-row">
      <div id="sidebar" class="col-md-auto pe-0" style="display: inline;">
        <ul class="nav nav-pills flex-column" style="background-color: rgb(172, 201, 135);">
          <li class="nav-item">
            <a class="nav-link" href="#">Link-Left1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link-Left2</a>
          </li>
        </ul>
      </div>
      <div id="content" class="col" style="background-color: rgb(241, 240, 172);">
        <div>Main area for dynamic contents based on menu selections</div>
      </div>
    </div>
  </div>

</div>

<div id="footer" class="p-4 bg-dark text-white text-center">
  <p>Footer</p>
</div>

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

Retrieve the div element by calling a scriptlet with JavaScript

I am facing an issue with a web page that includes a scriptlet like this: <div id="flash_chart"> <%=content_data['report_text']%> </div> The variable content_data['report_text'] contains a lengthy string ...

Is there a way to overlay a 'secret' grid on top of a canvas that features a background image?

I am currently working on developing an HTML/JS turn-based game, where I have implemented a canvas element using JavaScript. The canvas has a repeated background image to resemble a 10x10 squared board. However, I want to overlay a grid on top of it so tha ...

What are the steps to applying strike-through text in Vue.js?

I am currently working on a to-do application using Vue.js and I want to implement a feature where the text rendered in HTML has a line through it when the user checks an item off the list. Here is the snippet of my code: <html> <head> & ...

What are the best methods for creating a responsive webpage with images and text in the header?

My webpage features a razor page with a header component called PageHeader.razor. I have been attempting to make it responsive, but I am facing an issue where the text and image overlap when viewed in responsive mode. What could be causing this problem? ...

Position an image on the top left corner of a div's border

I have a situation where I'm trying to overlay a small square transparent image on the top left border of a div that has a 1px border. The image is 48px by 48px in size and I want it to give the illusion that it's going underneath the top and lef ...

Only reveal a single div when hovering

I am currently working on a project that involves utilizing the Wikipedia API to allow users to search for and retrieve information from Wikipedia. I have made significant progress, but I have encountered an issue. When hovering over the "each-list" div, t ...

Browser now replacing attribute translate="yes" with translate="translate"

We have encountered an issue with a translation library that is affecting the functionality of our page. <html lang="en" class="notranslate translated-ltr"> <meta name="google" content="notranslate"> As ...

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

Create a layout that includes options with checkboxes and divs styled inline

I'm in the process of setting up a voting poll on a website. The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the ...

"Items within mui Grid do not properly align within the Grid container

I'm struggling to fit two large Grid items inside a Grid container. The Grid container needs to be 100% of the screen's height (or parent container) Grid items are large and need to fill the container while remaining scrollable Image #1 shows t ...

Creating visualizations by overlaying shapes onto images using specified coordinates in jQuery

I have a web application in development that integrates with the skybiometry API. Their demo showcases a fantastic user feedback system displayed after facial recognition, similar to the one shown below. I am currently working on implementing a similar fe ...

Attempting to alter an image with a click and then revert it back to its original state

I'm currently working on a feature that toggles an image when a specific class is clicked. The code I have so far successfully switches from 'plus.png' to 'minus.png' upon clicking, but I need it to switch back to 'plus.png&ap ...

Bottom of the page: Bootstrap dilemma

After designing two footers, I decided to use CSS with the code position: absolute for the second footer. However, this change caused issues with the functionality of the first footer. The display now appears as follows: ...

The image on the landing page is not properly scaling to fit the size requirements

Currently utilizing Bootstrap Studio, I incorporated the code background-size:cover. While it works well in desktop mode, it unfortunately isn't very mobile-friendly. Below are screenshots for reference: Mobile View Example Desktop View Example ...

Resizing the Bootstrap carousel

My website has a custom-sized image that I want to display using Bootstrap's carousel, but I'm struggling with styling the carousel. Here is the result: https://i.sstatic.net/bs9HG.png I'm trying to align the picture in the center. Th ...

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...

Position the buttons away from the carousel

I am looking to use Bootstrap 4 to place full-height buttons on the left and right sides of a carousel, with the carousel being the largest element at a size of col-10. This is my current progress: @media (min-width: 768px) { /* CSS code for responsi ...

How can I achieve a transparent background for a text field in CSS instead of white?

I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...

Multiple card displays not working with Javascript Fetch API

I wrote a script that retrieves data from a URL and then organizes it into tables for display to the user. Initially, the script functioned correctly. However, I decided to enhance its flexibility by introducing two parameters - name and HTML div name wher ...