Creating a Bootstrap 4 layout where columns have 100% height and internal scroll capability

Question

Creating a Bootstrap 4 layout where columns have 100% height and internal scroll capability

Is it possible to achieve this specific layout using only Bootstrap 4?

  +-------------------------------------------------+
  |               Navbar fixed on top               |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Column A    |Column B                            |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+
  |                  Fixed footer                   |
  +-------------------------------------------------+

I need to ensure that Column A and B expand to fill the remaining space, covering the full screen without any scrolling at the body level. However, if their content exceeds the available space, I want them to scroll independently of each other - meaning scrolling in Column A should not affect Column B and vice versa. Additionally, how can I hide the scroll bars?

css bootstrap-4

Answer 1

Answer №1

Hey there, I put together this code for you to take a look at. The main idea here is that I fixed the positioning of certain sections and set the overflow property to scroll.

.header {
  position: fixed;
  width: 100%;
  background-color: blue;
  top: 0;
}

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: red;
}

.content{
 
  margin: 25px;
  overflow: hidden;
  position: fixed;
}

.a {
  width: 25%;
  float: left;
  overflow: scroll;
  height: 100vh;
}

.b {
  width: 75%;
  float: left;
  overflow: scroll;
  height: 100vh;
}

<div class="header"> This is the header</div>
<div class="content">
<div class="a">
Content of column A goes here
</div>
<div class="b">
Content of column B goes here
</div>
</div>
<div class="footer"> This is the footer</div>

Answer 2

Hey there, I put together this code for you to take a look at. The main idea here is that I fixed the positioning of certain sections and set the overflow property to scroll.

.header {
  position: fixed;
  width: 100%;
  background-color: blue;
  top: 0;
}

.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: red;
}

.content{
 
  margin: 25px;
  overflow: hidden;
  position: fixed;
}

.a {
  width: 25%;
  float: left;
  overflow: scroll;
  height: 100vh;
}

.b {
  width: 75%;
  float: left;
  overflow: scroll;
  height: 100vh;
}

<div class="header"> This is the header</div>
<div class="content">
<div class="a">
Content of column A goes here
</div>
<div class="b">
Content of column B goes here
</div>
</div>
<div class="footer"> This is the footer</div>

Answer 3

Answer №2

In my comment, I suggested using the standard Bootstrap grid layout to achieve the desired design.

row no-gutters

col

The maximum value of columns is 12 in Bootstrap layouts. More information on this can be found here.

To control the heights of containers, you can utilize the view height property in CSS by setting height: [number]vh;

For enabling scrolling functionality, consider using the CSS property overflow. Choices include auto or scroll - overflow: auto;

Here's a hypothetical representation:

HTML:

<nav class="navbar" id="mainNav">
    <div class="container">
        NAV
    </div>
</nav>
<div class="wrapper">
    <div class="row no-gutters">
        <div class="col-md-4 my-custom-class">
            Column A
            <br /><br />
            // Insert relevant content here
        </div>
        <div class="col-md-8 my-custom-class-2">
            Column B
            <br /><br />
            // Insert relevant content here
        </div>
    </div>
</div>
<div class="row no-gutters">
    <div class="col-md-12 custom-footer">
        FOOTER
    </div>
</div>

CSS:

.my-custom-class{
    background-color: blue;
    height: 75vh;
    color: white;
    overflow: auto;
}
.my-custom-class-2{
    background-color: red;
    height: 75vh;
    color: white;
    overflow: auto;
}

#mainNav{
    background-color: purple !important;
    color: white;
    height: 10vh;
}

.custom-footer{
    background-color: green;
    height: 15vh;
    color: white;
    text-align: center;
}

Runnable code snippet:

.my-custom-class{
background-color: blue;
height: 75vh;
color: white;
overflow: auto;
}
.my-custom-class-2{
background-color: red;
height: 75vh;
color: white;
overflow: auto;
}

#mainNav{
background-color: purple !important;
color: white;
height: 10vh;
padding-bottom: 8%;
}

.custom-footer{
background-color: green;
height: 15vh;
color: white;
text-align: center;
padding: 5%;
}

// Insert corresponding HTML and link bootstrap stylesheet before including navbar component

// Insert example content for columns A and B, observing assigned classes

See how it displays in a browser environment by visiting this link.

Screenshot preview available here: https://i.sstatic.net/4AhDy.png

Answer 4

In my comment, I suggested using the standard Bootstrap grid layout to achieve the desired design.

row no-gutters

col

The maximum value of columns is 12 in Bootstrap layouts. More information on this can be found here.

To control the heights of containers, you can utilize the view height property in CSS by setting height: [number]vh;

For enabling scrolling functionality, consider using the CSS property overflow. Choices include auto or scroll - overflow: auto;

Here's a hypothetical representation:

HTML:

<nav class="navbar" id="mainNav">
    <div class="container">
        NAV
    </div>
</nav>
<div class="wrapper">
    <div class="row no-gutters">
        <div class="col-md-4 my-custom-class">
            Column A
            <br /><br />
            // Insert relevant content here
        </div>
        <div class="col-md-8 my-custom-class-2">
            Column B
            <br /><br />
            // Insert relevant content here
        </div>
    </div>
</div>
<div class="row no-gutters">
    <div class="col-md-12 custom-footer">
        FOOTER
    </div>
</div>

CSS:

.my-custom-class{
    background-color: blue;
    height: 75vh;
    color: white;
    overflow: auto;
}
.my-custom-class-2{
    background-color: red;
    height: 75vh;
    color: white;
    overflow: auto;
}

#mainNav{
    background-color: purple !important;
    color: white;
    height: 10vh;
}

.custom-footer{
    background-color: green;
    height: 15vh;
    color: white;
    text-align: center;
}

Runnable code snippet:

.my-custom-class{
background-color: blue;
height: 75vh;
color: white;
overflow: auto;
}
.my-custom-class-2{
background-color: red;
height: 75vh;
color: white;
overflow: auto;
}

#mainNav{
background-color: purple !important;
color: white;
height: 10vh;
padding-bottom: 8%;
}

.custom-footer{
background-color: green;
height: 15vh;
color: white;
text-align: center;
padding: 5%;
}

// Insert corresponding HTML and link bootstrap stylesheet before including navbar component

// Insert example content for columns A and B, observing assigned classes

See how it displays in a browser environment by visiting this link.

Screenshot preview available here: https://i.sstatic.net/4AhDy.png

Answer 5

Answer №3

It is recommended to set a specific height for your div up to 100vh. This ensures that when the content exceeds more than 100% of the height, the built-in Bootstrap class overflow-auto will automatically apply a scroll bar to the div.

#header {
  position: absolute;
  height: 50px;
  background-color: brown;
  width: 100%;
}

#body {
  position: absolute;
  top: 50px;
  bottom: 50px;
  background-color: yellow;
}

#footer {
  background-color: red;
  position: absolute;
  height: 50px;
  bottom: 0;
  width: 100%;
}

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

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

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>
  <div id="header">Header</div>
  <div id="body" style="overflow-x: hidden;">
    <div class="row">
      <div class="col-4 overflow-auto" style='height: 100vh;'>Sample text here.</div>
      <div class="col-8 overflow-auto" style='height: 100vh;'>More sample text here.</div>
    </div>
  </div>
  <div id="footer">Footer</div>
  
</body>

</html>

Answer 6

It is recommended to set a specific height for your div up to 100vh. This ensures that when the content exceeds more than 100% of the height, the built-in Bootstrap class overflow-auto will automatically apply a scroll bar to the div.

#header {
  position: absolute;
  height: 50px;
  background-color: brown;
  width: 100%;
}

#body {
  position: absolute;
  top: 50px;
  bottom: 50px;
  background-color: yellow;
}

#footer {
  background-color: red;
  position: absolute;
  height: 50px;
  bottom: 0;
  width: 100%;
}

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

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

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>

<body>
  <div id="header">Header</div>
  <div id="body" style="overflow-x: hidden;">
    <div class="row">
      <div class="col-4 overflow-auto" style='height: 100vh;'>Sample text here.</div>
      <div class="col-8 overflow-auto" style='height: 100vh;'>More sample text here.</div>
    </div>
  </div>
  <div id="footer">Footer</div>
  
</body>

</html>

Creating a Bootstrap 4 layout where columns have 100% height and internal scroll capability

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to display link text when the sidebar is collapsed on Angular 9?

What are some tips for customizing the NavBar Bootstrap 4 Layout to fit a unique design?

Tips for making an appended element match the height of an image

Issue with DIV positioning in IE when another DIV is animated downwards

What CSS property can be used to make short words wrap to the next line?

What is the method for setting a cell's row-span to 2 using bootstrap?

What steps can be taken to ensure this website is responsive and includes a countdown counter?

The button in the flex container is not wide enough due to center alignment

Difficulty arises with z-index when hover effects are applied to clip-path shapes

Create a webpage layout using Bootstrap that features a left-aligned image within a div, with

How to style multiple tags using CSS

spontaneous generation of web page elements

Create a collapsible menu using only CSS that expands when the down arrow is clicked, specifically designed for

Tips for continuously duplicating a value in every textbox until the final one

The burger icon in the navigation bar is malfunctioning, showing just a single horizontal line instead

What would you name this particular element?

In HTML, favoring the use of "//domain.com" over "https://domain.com" or "http://domain.com" is recommended for greater flexibility and compatibility

Positioning an asp:Button to the right of the asp:Wizard's Next Button

Customizing Mouse Pointers in CSS

Is there a way to dynamically count the length of an element or class in realtime using JavaScript?