Designing an immersive full-screen experience with scrollable columns using Bootstrap

Trying to achieve a full-screen layout that occupies 100% of the viewport with a sticky header and footer, along with columns in the main content area that can be individually scrolled.

I've been experimenting with using classes like .h-100 and .flex-grow-1 on different rows and columns but haven't been successful. The closest I got was by adding h-100 to the container and middle row, but this caused the footer to be pushed off the bottom of the screen.

<body>
<div class="container-fluid h-100">
    <div class="row">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">Article list </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row">
        <div class="col-12 border">Footer </div>
    </div>
</div>
</body>

I managed to make it work with a single column, but when trying to add more than one column, the layout broke in a way that I cannot figure out.

csstwitter-bootstrapflexboxbootstrap-4

Answer №1

To ensure the content area fills the height of the container, apply the d-flex class and use flex-grow-1. Additionally, use flex-shrink-0 on the Navbar and Footer to prevent them from compressing in height.

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-grow-1">
        <div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border" style="overflow-y: scroll;">
            Article list
        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

Demo:

Related:
Utilizing remaining vertical space with Bootstrap 4
Bootstrap 4.0 - creating a responsive header with image + navbar + full-height body

Answer №2

I had a tough time figuring this out for some reason. I decided to separate the 'unique' content on my website from the navbar and footer by utilizing the <main> tag, which meant adding main {overflow-y: auto} to the css after html, body. Below is the correct html and css using the example provided.

HTML:

<body>
    <div class="container-fluid h-100 d-flex flex-column">
        <div class="row flex-shrink-0">
            <div class="col-12 border">Navbar</div>
        </div>
        <main class="d-flex flex-fill">
            <div class="row flex-fill" style="min-height: 0">
                <div class="col-2 border mh-100" style="overflow-y: auto">Sidebar</div>
                <div class="col-4 border mh-100" style="overflow-y: auto">
                    <div style="background-color: red; min-height: 1000px">Scrollable article list</div>
                </div>
                <div class="col-6 border mh-100" style="overflow-y: auto">Article content</div>
            </div>
        </main>
        <div class="row flex-shrink-0">
            <div class="col-12 border">Footer</div>
        </div>
    </div>
</body>

The red div is only there for demonstration purposes to show that you can scroll within the column. Feel free to replace it with your own content.

CSS:

html,
body {
    height: 100%;
    max-height: 100%;
}
main {
    overflow-y: auto;
}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing <label> elements, while disregarding those <label> elements that include <input>

I need assistance with CSS rules to target only <label> elements that do not contain an <input> field inside of them. Is there a specific rule I can use for this? <label for="type">Regular Label</label> <label for="type"> ...

css

What is preventing me from installing Angular Bootstrap?

Version Information: Angular CLI: 14.2.3 Node: 16.15.1 Package Manager: npm 8.12.1 Operating System: darwin x64 Encountered an error while trying to install Angular Bootstrap using NPM: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! ...

node.jsangularnpmbootstrap-4node-modules

The arrangement of elements varies based on the type of display

I'm still learning HTML and CSS, and I've noticed that the layout of my elements changes depending on the screen size. Everything looks good on my 24" monitor, but some elements overlap on my 15" laptop screen. What could be causing this issue, ...

htmlcss

Customize tab background color in Material-UI by utilizing a styledTab component with a passed prop

I've customized this tab to have my desired style: import { withStyles } from "@material-ui/core/styles"; const StyledTab = withStyles((theme) => ({ root: { backgroundColor: "yellow", }, }))((props) => { const { shouldSetBackgroundCol ...

cssreactjsmaterial-uimern

Explain the inner workings of the setTimeout() function in JavaScript

My goal is to create a line in my code by placing points according to the line equation and adding a 100 millisecond delay before each point is displayed. However, when I try to run the code, it seems to wait for some time and then displays all the points ...

javascripthtmlcsssettimeout

What is the best way to implement CSS styles from a parent component?

Within a React component using Emotion, we have a component called OtherComponent: OtherComponent: ... return <div css={otherComponentStyles}> <div className='something'> </div> </div> There is also another comp ...

cssreactjsnext.jsemotion

Is it necessary to install only form control styles from Bootstrap 4?

Does Bootstrap 4 offer a way to only install the form control styles like input group? I came across a resource that allows you to solely install the Bootstrap 4 Grid. Is there anything similar for downloading just the form styles? ...

htmlcsstwitter-bootstrapsassbootstrap-4

Mobile devices not responding to media queries properly

My website has different sets of CSS styles for various screen sizes: (1) @media only screen and (max-width: 566px) { (2) @media only screen and (min-width: 567px) and (max-width: 767px) { (3) @media only screen and (min-width: 768px) and (max-width: 999 ...

cssresponsive-designmedia-queriessmartphone

Bootstrap-enhanced Ajax functionality with TbSelect2 for Yii framework

I'm working on a Select feature that dynamically changes its contents based on another Select option. This is achieved by running an ajax function in my controller: $this->renderPartial("_townsselect", array('country'=>$country)); Th ...

phpjqueryajaxtwitter-bootstrapyii

How can I disable a checkbox in AngularJS?

Is there a way to automatically disable a checkbox when selecting an item from the combo box? For example, if "ABONE" is selected, Angular should disable the ABONE checkbox. Note (for example): DefinitionType: ABONE https://i.sstatic.net/vcZpR.png ...

javascripthtmlangularjstwitter-bootstrapcheckbox

The scrollbar track has a habit of popping up unexpectedly

Is there a way to prevent the white area from showing up in my divs where the scroll bar thumb appears? The issue seems to occur randomly on Chrome and Safari. https://i.sstatic.net/jFzTf.png This is the div in question .column-content{ height:60vh; ...

htmlcssangularscrollscrollbar

CSS: ways to set a maximum height for a datalist container

Hello, I have a datalist with over 100 options and I would like to set a maximum height for it to ensure the design looks tidy. Can anyone please help me out with this? Thank you! <input type="text" list="suggestions" class="f ...

htmlcsswebbootstrap-4

Explore the latest update in the AngularJS single page application that introduces a new feature specifically designed for the initial login

Our AngularJS single page application has a new feature that we are ready to launch for customer use. We want to inform the logged in user about this new feature so they can start using it. We are looking for a small animated information symbol with a too ...

javascriptangularjshtmltwitter-bootstrapangular-ui-bootstrap

My website always fits on smaller resolution screens, but annoyingly, a horizontal scroll bar still appears

My website seems to have a horizontal scroll bar on smaller resolution screens, even though it fits. Any suggestions on making it fit better? If you're using a laptop, you'll notice that the scroll bar moves too far right to just show blank grey ...

htmlcsslayout

The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...

htmlcsscss-selectors

Struggling with removing the unattractive left border on my Tumblr page

I am currently working on the website www.fashiontogo.ca To see the source code, please use Google Chrome's feature to view the source since I cannot provide the HTML or CSS directly here. The site is not my own creation, and I did not develop it fro ...

htmlcsstumblr

Eliminate gaps between lines in a wrapped Flexbox layout

I am trying to eliminate the spaces between rows in a horizontal list flexbox. I am creating an alphabetical list and I want it to flow seamlessly without any gaps. This is what I have so far: #example { display: block; margin-left: auto; margin-r ...

htmlcssflexboxwhitespace

Designs for an HTML5 Cheeseburger navigation interface

I've been struggling to implement a functional and visually appealing hamburger menu on my website. The challenge lies in integrating the menu seamlessly into the page rather than having it just pop up abruptly. Despite trying various webkit tools, I ...

javascripthtmlcsswebkit

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

htmlcsscss-transitions

What is the best way to display the loan detail and credit detail tables beneath the application detail section that is currently blank?

I have a total of four tables on my page. The size of one table is almost identical to the other three smaller tables. I am looking to place the loan details and credit details table below the application detail, in a way that utilizes the empty space avai ...

cssangularangular-flex-layout