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

Question

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>

html css bootstrap-5

Answer 1

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

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 3

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>

Answer 4

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>

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

Answer №1

Answer №2

Similar questions

Retrieve the div element by calling a scriptlet with JavaScript

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

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

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

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

Only reveal a single div when hovering

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

`Issues encountered with resizing the menu``

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

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

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

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

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

Bottom of the page: Bootstrap dilemma

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

Resizing the Bootstrap carousel

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

Position the buttons away from the carousel

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

Multiple card displays not working with Javascript Fetch API