Make the height of the CSS div fill the remaining space and allow scrolling once the maximum height of the screen is reached

Question

Make the height of the CSS div fill the remaining space and allow scrolling once the maximum height of the screen is reached

I've scoured the internet high and low for a solution to my problem, but I just can't seem to find anything that fits my needs perfectly. The answers I have come across are either outdated or not quite what I'm looking for. I'm really hoping someone can assist me with this.

I'm using bootstrap 4 in my application, so if it can be achieved with bootstrap, that would be fantastic. However, pure CSS is also acceptable.

What I'm trying to accomplish is having 4 divs side by side.

For example:

<div class="row">
    <div class="col">
        <h1>Item 1</h1>
    </div>

    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
</div>

This layout works well with bootstrap 4, but now I also want the height of the divs to extend to the bottom of the screen. If the content within a div is longer than the screen height, it should have a scroll bar within the div.

I've considered using flex boxes, but I haven't been able to make it work.

html css twitter-bootstrap flexbox bootstrap-4

Answer 1

Answer №1

Utilizing bootstrap 4 means that the flex feature is already integrated.

If you want a row to expand to 100% of the viewport height and have a scroll bar inside the child element once it surpasses that height, you will need to create a custom class that includes max-height and overflow properties:

Example of a custom class:

<div class="row h100-scroll  ">

Here are some selectors and rules to get you started:

.h100-scroll .col {/* to individually scroll each column*/
  max-height: 100vh;
  overflow: auto;
}

or

.h100-scroll  {/* to scroll the entire row itself */
  max-height: 100vh;
  overflow: auto;
}

Take a look at the demo below, run the snippet and hover over the text in the first column

.h100-scroll .col {
  max-height: 100vh;
  overflow: auto;
}

.col br {display:none;}
p:hover br {display:block;}
body {
  margin: 0 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
<div class="row h100-scroll  ">
  <div class="col">
    <h1>Item 1</h1>
    <p>hover me show the br and add a scrollbar<br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . 
  </div>

  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
</div>

Answer 2

Utilizing bootstrap 4 means that the flex feature is already integrated.

If you want a row to expand to 100% of the viewport height and have a scroll bar inside the child element once it surpasses that height, you will need to create a custom class that includes max-height and overflow properties:

Example of a custom class:

<div class="row h100-scroll  ">

Here are some selectors and rules to get you started:

.h100-scroll .col {/* to individually scroll each column*/
  max-height: 100vh;
  overflow: auto;
}

or

.h100-scroll  {/* to scroll the entire row itself */
  max-height: 100vh;
  overflow: auto;
}

Take a look at the demo below, run the snippet and hover over the text in the first column

.h100-scroll .col {
  max-height: 100vh;
  overflow: auto;
}

.col br {display:none;}
p:hover br {display:block;}
body {
  margin: 0 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
<div class="row h100-scroll  ">
  <div class="col">
    <h1>Item 1</h1>
    <p>hover me show the br and add a scrollbar<br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . 
  </div>

  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
</div>

Answer 3

Answer №2

It may be beneficial to utilize jQuery for this particular task. Explanation:

If the height of the div exceeds the height of the document, display a scroll bar within the div

Sample Code:

$(document).ready(function(){

var docHeight = $(document).height();

var divHeight = $('.the-four-divs').height();
if(divHeight > docHeight){
$('.the-four-divs').css('overflow-x', 'scroll');

}

});

Hope this solution proves useful.

Answer 4

It may be beneficial to utilize jQuery for this particular task. Explanation:

If the height of the div exceeds the height of the document, display a scroll bar within the div

Sample Code:

$(document).ready(function(){

var docHeight = $(document).height();

var divHeight = $('.the-four-divs').height();
if(divHeight > docHeight){
$('.the-four-divs').css('overflow-x', 'scroll');

}

});

Hope this solution proves useful.

Answer 5

Answer №3

To ensure the element fills the screen height, you must specify its height as 100%. If the parent element does not occupy the full screen height, you will also need to set its height accordingly. If your HTML layout resembles the following:

<html>
<body>
  <div class="row">
      <div class="col"></div>
  </div>
</body>
</html>

...then you should set the height of each element to 100% like this:

html, body, div.row, div.col {
    height: 100%;
}

To add a scrollbar, you can set the overflow property to scroll:

.col {
    overflow: scroll;
}

Answer 6

To ensure the element fills the screen height, you must specify its height as 100%. If the parent element does not occupy the full screen height, you will also need to set its height accordingly. If your HTML layout resembles the following:

<html>
<body>
  <div class="row">
      <div class="col"></div>
  </div>
</body>
</html>

...then you should set the height of each element to 100% like this:

html, body, div.row, div.col {
    height: 100%;
}

To add a scrollbar, you can set the overflow property to scroll:

.col {
    overflow: scroll;
}

Make the height of the CSS div fill the remaining space and allow scrolling once the maximum height of the screen is reached

Answer №1

Answer №2

Answer №3

Similar questions

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

Tips for center-aligning layouts in Angular Material

Modify the width of the inner or child elements

Customize stepper background color in Angular Material based on specific conditions

Using jQueryUi Tabs for Organizing Div Tables

The Express JS is having trouble serving the static CSS files through the router

JavaScript/jQuery Tutorial: Accessing the src attribute of images sharing a common class名

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

Ensure that the select boxes are aligned in a horizontal manner

Extracting information from an external website in the form of XML data

Tips for creating an HTML table that fills the entire width of its parent element:

Adjust the appearance attribute of FormField within the designated theme

Issues arise when attempting to determine the accurate dimensions of a canvas

What is the process for incorporating a Bootstrap link into a specific ReactJS file?

Steer your keyboard attention towards the parent element that embodies a list

The combination of HTML, CSS, and vertical text margins is essential for creating visually

What is the best way to incorporate multiple versions of jQuery on one webpage?

The jQuery toggleClass() function is not being applied successfully to content that is dynamically generated from

Incorporating Font Awesome into your gulp project the right way

Approach to decoupling design elements from DOM interactions