Creating a div that takes up 100% of its parent's height, regardless of the children's dimensions, in a sophisticated layout

Question

Creating a div that takes up 100% of its parent's height, regardless of the children's dimensions, in a sophisticated layout

My webpage layout is structured as follows:

https://i.sstatic.net/5rdiw.png

The left side, identified as D, functions perfectly. It contains a significant amount of content that scrolls correctly. Even as the content increases, the height stays at 100% of the webpage's height, allowing for seamless scrolling.

On the right side, there is content in B. This also works fine. Utilizing Bootstrap 4, B and A are set as row within a col, each occupying 50% of the parent container.

The issue arises when I want A to fill the remaining space while being independently scrollable, regardless of the number of C elements inside it. This means that with one C, it should take up half the page's height (as shown in the image), and with 20 C elements, it should maintain the same height, enabling users to scroll to view the 20th C.

Currently, I can enable vertical scrolling on A by setting a fixed height like height=350px, but this is not ideal as desktops have varying screen heights. On the other hand, if I don't specify a height, A's height adjusts to accommodate all elements inside it, causing the right background layout to exceed the left part of the webpage with just 4 C elements, disrupting the overall layout.

<div class="right-bg">
<div class="container col" style="height:100%">
  <div class="row"> <!-- THIS IS B -->
    <div class="col"> 
      <div class="row" id="chart-div">
        <canvas id="myChart"></canvas>
      </div>
      <div class="row horizontal-menu-wrapper">      
      </div>
    </div>
  </div>
  <div class="container row ranking-container"> <!-- THIS IS A -->
    <div class="container rounded-card"> <!-- THIS IS C -->
      <div class="row">
        <div class="col-lg-1 col-md-1 col-sm-1">
          <div id="ranking-trophy-header" class="row card-header">
            <i title="General" class="fas fa-trophy header-icon"></i>
          </div>
        </div>
        <div class="col-lg-11 col-md-11 col-sm-11">
          <div class="row row-card">
            <div class="col-lg-5 col-md-5 col-sm-5">
              <p class="ranking-percentage-value"> Top 1%</p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Position</p>
              <p class="form-ranking-value"><span class="absolute-ranking">#<span class="absolute-ranking-value">83</span></span></p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Pool</p>
              <p class="form-pool-value">9470</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

html {
  height: 100%;
}

body {
  height: 100%;
}

.left-bg {
  flex-flow: column;
  display: flex;
  width: 54%;
  height: 100%;
  overflow: scroll;
  padding-bottom: 10px;
}

.right-bg {
  flex-flow: column;
  display: flex;
  width: 46%;
  height: 100%;
  padding-top: 12px;
}

.ranking-container {
  vertical-align: center;
  margin: 5px;
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 15px;
  overflow: scroll;
  border-radius: 10px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

html css twitter-bootstrap bootstrap-4 display

Answer 1

Answer №1

To make a container occupy all available space, use d-flex, flex-column, and h-100 for its parent. Add flex-grow-1 to the row that needs to fill the remaining space.

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col"></div>
  </div>
</div>

This layout setup remains consistent irrespective of the number of rows you have.

Check out the example on Codepen

Ensure you are using Bootstrap 4.1 for flex-grow-1 as it is not available in earlier versions.

Simplify your styles by utilizing Bootstrap classes where possible.

Update

If you encounter issues in Chrome, apply flex-grow-1 to the column within the flex-grow-1 row. Set overflow-y to scroll for scrolling, and you can hide the scrollbars if needed.

html,
body {
  height: 100%;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

/* Hide scrollbar in webkit-browsers */

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #FF0000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col flex-grow-1 bg-primary overflow-y-scroll">
      <!-- content -->
    </div>
  </div>
</div>

View the updated example on Codepen

Answer 2

To make a container occupy all available space, use d-flex, flex-column, and h-100 for its parent. Add flex-grow-1 to the row that needs to fill the remaining space.

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col"></div>
  </div>
</div>

This layout setup remains consistent irrespective of the number of rows you have.

Check out the example on Codepen

Ensure you are using Bootstrap 4.1 for flex-grow-1 as it is not available in earlier versions.

Simplify your styles by utilizing Bootstrap classes where possible.

Update

If you encounter issues in Chrome, apply flex-grow-1 to the column within the flex-grow-1 row. Set overflow-y to scroll for scrolling, and you can hide the scrollbars if needed.

html,
body {
  height: 100%;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

/* Hide scrollbar in webkit-browsers */

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #FF0000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col flex-grow-1 bg-primary overflow-y-scroll">
      <!-- content -->
    </div>
  </div>
</div>

View the updated example on Codepen

Answer 3

Answer №2

Give it a shot:

<div class="box column" style="position: absolute; top: 0px; bottom: 0px; ">
</div>

Answer 4

Give it a shot:

<div class="box column" style="position: absolute; top: 0px; bottom: 0px; ">
</div>

Answer 5

Answer №3

If you set a specific height for any block-level element and then include the following CSS:

overflow: auto;

a scrollbar will be added to that element if its content exceeds the explicitly defined height of the element.

Below is a sample layout similar to the one you mentioned, created using CSS Grid.

Please note that vertical scrollbars will automatically appear in sections D and A since the content within those elements exceeds the height of the parent elements.

See the live example below:

main {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
width: 80vw;
height: 80vh;
border: 6px solid rgb(191, 191, 191);
border-radius: 15px;
}

.a-area {
background-color: rgb(255, 63, 63);
}

.b-area {
background-color: rgb(255, 127, 0);
}

.c-area {
border: none;
background-color: rgb(63, 63, 63);
}

.d-area {
grid-area: 1 / 1 / 3 / 2;
color: rgb(127, 127, 127);
}

main div {
color: rgb(255, 255, 255);
border: 4px solid rgb(191, 191, 191);
overflow-x: hidden;
overflow-y: auto;
}

main div h2 {
margin: 0;
padding-right: 6px;
font-size: 24px;
line-height: 36px;
text-align: right;
}

main div p,
.c-area {
margin: 6px 12px;
}

<main>
<div class="d-area">
<h2>D</h2>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

<div class="b-area">
<h2>B</h2>
</div>

<div class="a-area">
<h2>A</h2>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

</div>
</main>

Answer 6

If you set a specific height for any block-level element and then include the following CSS:

overflow: auto;

a scrollbar will be added to that element if its content exceeds the explicitly defined height of the element.

Below is a sample layout similar to the one you mentioned, created using CSS Grid.

Please note that vertical scrollbars will automatically appear in sections D and A since the content within those elements exceeds the height of the parent elements.

See the live example below:

main {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
width: 80vw;
height: 80vh;
border: 6px solid rgb(191, 191, 191);
border-radius: 15px;
}

.a-area {
background-color: rgb(255, 63, 63);
}

.b-area {
background-color: rgb(255, 127, 0);
}

.c-area {
border: none;
background-color: rgb(63, 63, 63);
}

.d-area {
grid-area: 1 / 1 / 3 / 2;
color: rgb(127, 127, 127);
}

main div {
color: rgb(255, 255, 255);
border: 4px solid rgb(191, 191, 191);
overflow-x: hidden;
overflow-y: auto;
}

main div h2 {
margin: 0;
padding-right: 6px;
font-size: 24px;
line-height: 36px;
text-align: right;
}

main div p,
.c-area {
margin: 6px 12px;
}

<main>
<div class="d-area">
<h2>D</h2>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

<div class="b-area">
<h2>B</h2>
</div>

<div class="a-area">
<h2>A</h2>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

</div>
</main>

Creating a div that takes up 100% of its parent's height, regardless of the children's dimensions, in a sophisticated layout

Answer №1

Check out the example on Codepen

Update

Answer №2

Answer №3

Similar questions

Trouble with image click event in jQuery/JavaScript

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

Encase a group of div elements with identical styling

I am experiencing issues with my PHP quiz application; it is malfunctioning when I try

This code works perfectly for uploading jpg images, but unfortunately, it does not support the transparent background of png images

Dealing with challenges in integrating ngx-masonry with Angular 14

Struggling to implement a vertical scroll bar in HTML code?

Creating a dynamic className string in JavaScript with React

Connecting text boxes with JavaScript and JSON for gaming experience

Adjust transparency according to the information extracted from the AnalyserNode

Can the Twitter Bootstrap typeahead feature be used with an external data source?

Creating a dropdown menu with an initial value fetched from a text file

The image tag is being used to show the exact location, however, there is no

Using jQuery and CSS to create a temporary placeholder for images that have varying sizes

Why is it that when the form is submitted, the value becomes unclear?

Using CSS/HTML to showcase rows in a vertical table format (or similar)

Utilize Express Handlebars to render an input-generated list for display

An innovative approach to loading tabs dynamically using Materialize CSS

What is the best method for saving HTML form data into a Node JS variable?

Validating usernames with parsley (version 2.8.1) using php