Achieving fixed full height divs with scrollbars in Bootstrap can be accomplished by following these steps

Question

Achieving fixed full height divs with scrollbars in Bootstrap can be accomplished by following these steps

I am currently working on a Bootstrap page layout with three columns, each set to 100% height and equipped with scrollbars, while keeping the body free of any scrollbars. The desired layout should look like this: https://i.sstatic.net/sA5Bb.jpg

Here is my code so far:

<main role="main" class="container">
    <div class="row">
        <div class="col-md-3 ">
            Navigation Area <br />
        </div>
        <div class="col-md-6">
            Content Area <br />
        </div>
        <div class="col-md-3">
            Profile Area <br />
        </div>
    </div>
</main>

As of now, I have not applied any additional CSS styles. Can you guide me on how to successfully achieve this desired layout?

css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Get rid of the body's scrollbar

To remove the scrollbar, apply overflow: hidden

body {
    overflow-y: hidden;
}

Add a scrollbar to each column part

To add a scrollbar, use overflow: scroll

main div[class*="col-"] {
    overflow-y: scroll;
}

Make it reach full height

To achieve that, you should use height: 100vh and subtract your navbar's height from it. The default bootstrap navbar height is 116px (including padding).

main {
    height: calc(100vh - 116px);
}

Here's a Live Snippet for You

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<style>
    body {
        overflow-y: hidden;
    }
    main div[class*="col-"] {
        overflow-y: scroll;
        height: 100vh;
    }
</style>

<main role="main" class="container-fluid">
    <div class="row">
        <div class="col-md-3 ">
            [Insert Lorem Ipsum text here]
        </div>
        <div class="col-md-6">
            [Insert Lorem Ipsum text here]
        </div>
        <div class="col-md-3">
            [Insert Lorem Ipsum text here]
        </div>
    </div>
</main>

Answer 2

Get rid of the body's scrollbar

To remove the scrollbar, apply overflow: hidden

body {
    overflow-y: hidden;
}

Add a scrollbar to each column part

To add a scrollbar, use overflow: scroll

main div[class*="col-"] {
    overflow-y: scroll;
}

Make it reach full height

To achieve that, you should use height: 100vh and subtract your navbar's height from it. The default bootstrap navbar height is 116px (including padding).

main {
    height: calc(100vh - 116px);
}

Here's a Live Snippet for You

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<style>
    body {
        overflow-y: hidden;
    }
    main div[class*="col-"] {
        overflow-y: scroll;
        height: 100vh;
    }
</style>

<main role="main" class="container-fluid">
    <div class="row">
        <div class="col-md-3 ">
            [Insert Lorem Ipsum text here]
        </div>
        <div class="col-md-6">
            [Insert Lorem Ipsum text here]
        </div>
        <div class="col-md-3">
            [Insert Lorem Ipsum text here]
        </div>
    </div>
</main>

Answer 3

Answer №2

Adjust the positioning of elements by making parent-main relative and child-settings absolute. Add overflow: auto; height: 100% to enable overflow for child elements. To remove the navbar height from the page, utilize

height: calc(100vh - "nav-height")

.main {
  position: relative;
  width: 100%;
  height: 100vh;
}

.settings {
  overflow: auto;
  height: 100%;
  width: 100%
}

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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <div class="main">
          <div class="container settings" style="position: absolute;">
            <div class="box no-box-small-mobile">
              <div class="column">
                <h1>test</h1>  
                              ... (remaining content omitted for brevity)              
                                       ...                
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="main">
          <div class="container settings" style="position: absolute;">
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
             ...              
                             ...
                                   ...
                        

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 4

Adjust the positioning of elements by making parent-main relative and child-settings absolute. Add overflow: auto; height: 100% to enable overflow for child elements. To remove the navbar height from the page, utilize

height: calc(100vh - "nav-height")

.main {
  position: relative;
  width: 100%;
  height: 100vh;
}

.settings {
  overflow: auto;
  height: 100%;
  width: 100%
}

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

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <div class="main">
          <div class="container settings" style="position: absolute;">
            <div class="box no-box-small-mobile">
              <div class="column">
                <h1>test</h1>  
                              ... (remaining content omitted for brevity)              
                                       ...                
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="main">
          <div class="container settings" style="position: absolute;">
            <div class="item">
              <div class="label">A thing</div>
              <div class="value">1.45</div>
             ...              
                             ...
                                   ...
                        

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Achieving fixed full height divs with scrollbars in Bootstrap can be accomplished by following these steps

Answer №1

Answer №2

Similar questions

Customize the appearance of polygons in OpenLayers 2 by adjusting the fill color and opacity

What is the best way to ensure elements expand to the full width when the body exceeds 100% width?

Chosen Buttons for Emailing

Content towering over the footer

The size of divs adjust based on the size of the browser window

Function activation in Element requires a double click to initiate

Adding DIV elements within a Bootstrap Carousel

Creating a single div to influence the height of surrounding divs

I'm currently in the process of incorporating horizontal scrolling into various sections of an image gallery. The images will stack vertically only when the window width

FLASK Template Rendering

Challenges with Bootstrap input groups

Using the mouse scroll to activate the $anchorScroll effect in Angular instead of a click

"Adapting Bootstrap dropdown menu to display in the top left corner

Ratios for Sizing Bootstrap Columns

How can the position of Bootgrid's pagination element be fixed in relation to its parent container, no matter how many table rows are present?

Is there a better method to determine the width when utilizing the jQuery UI resizable feature for improved efficiency?

Fixed table layout prevents table cells from expanding inside a 100% width table row with absolute positioning, while also ensuring that the elements do not collapse

Tips for rearranging a span following an image?

Click on the submenu to expand it, then simply select the desired option to navigate

Stencil - React Integration Does Not Support Global CSS Styling