Tips for creating equal height columns in Bootstrap 4

Working with Bootstrap 4 Beta in an attempt to create two columns that maintain full height regardless of screen size.

The code below functions perfectly, ensuring both columns maintain full height across all devices.

However, upon inserting the bootstrap navbar inside the container, above the row, I notice extra space added to the page causing a scrollbar to appear.

It seems that Bootstrap is not factoring in the height of the navbar in its calculations.

I am uncertain how to resolve this issue.

DEMO https://jsfiddle.net/a2z4paes/1/

Removing the nav block reveals that the columns attain full height without a scrollbar.

This is my HTML

<div class="container h-100">
    <div class="row justify-content-center h-100">
        <div class="col-md-8" style="background: lightgreen; height: 100%">
            <h1>test</h1>
        </div>

        <div class="col-md-4" style="background: lightblue;">
            <h1>test</h1>
        </div>
    </div>
</div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

When it comes to resolving this issue, using Flexbox is the optimal choice. Although you could technically address it with the calc() function, that would feel more like a workaround than a true solution. Here's the updated fiddle and below are the steps I took: https://jsfiddle.net/sandeepcnath/a2z4paes/4/

Start by removing the h-100 class,

Then add the following style to the container 

container {
height: 100%;
display: flex;
flex-direction: column;
}

Afterwards, apply the flex: 1; style to the div that sits next to the nav (the one with classes row & justify-content-center).

You will notice that the height remains at 100% and the scroll bar won't appear even when toggling the nav open or closed.

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

Dynamic content in a CSS animation that rolls credits as they scroll

Currently, I'm working on creating a credit scrolling effect that pulls data from the JustGiving API to display a list of donors. I have successfully populated the list of donors and connected to the API without any issues. However, the challenge lies ...

javascripthtmlcsscss-animations

Objects in the array are failing to sort in the expected sequence

I am facing an issue with sorting an array of objects by a date property using the lodash function orderBy. I have tried to sort it in both ascending and descending order. var searchObj = [{id: 1, postDate: '2/24/2016 5:08 PM'}, ...

javascriptarrayssortingtypescriptlodash

In my Vue watch method, I have two parameters specified, and one of them remains constant without any changes

Currently, I am attempting to access a method within my watch function with two parameters. Here is the code snippet for the method: onBoolianChange(value, willChange) { willChange = (value === false) ? true : false; }, watch: { "e ...

javascriptvue.js

Eliminating blank attributes within an array of objects

I'm currently working on a task that involves creating an array to summarize another array. I've received valuable suggestions from various sources, including this discussion on Stack Overflow. Although the solutions provided are effective, they ...

javascriptarraysobjectkey

Having trouble with submitting data in an ExpressJS POST request while using mongoose?

As I embark on building my first express.js application, I encounter my initial obstacle. The setup is rather simple. Routes in app.js: app.get('/', routes.index); app.get('/users', user.list); app.get('/products', product. ...

javascriptnode.jsmongodbexpress

Retrieve the Axios response without interruption, even in the event of an exception, when making API calls with multiple files

Currently, as a beginner diving into Vue.js, I am exploring the world of frontend development by integrating Vue with my Laravel backend. To streamline my API calls and make them more organized for different models, I decided to create a separate file name ...

javascriptlaravelvue.jsvuejs3

Timer countdown: Looking for a countdown timer that will reset to 3:00 automatically each time it reaches 0 minutes, and can do so

Seeking a continuous countdown timer that starts from 03:00 and counts down to 0:00, then automatically resets back to 03:00, in an infinite loop. The condition is that no one should be able to manually stop this logic. After researching, I found a Ja ...

phpjquerymysqlangularjscss

The lack of search results on Google Custom Search could be due to issues with META tags

I have a website and I've successfully integrated Google Custom Search following all the provided instructions. Although I indexed my site three months ago, the custom search still shows no results. Even after adding sitemap.xml, there has been no i ...

phphtmlmeta-tagsmetagoogle-custom-search

The 'fetch' operation could not be completed on the current window due to a TypeError

The error message I am receiving is: TypeError: Failed to execute 'fetch' on 'Window' : The provided value is not of type '(sequence<sequence> or record<ByteString, ByteString>)'. My current challenge involves fetc ...

javascriptreactjshttpfetch

Having trouble with your contact form and not getting it to work properly with Javascript, Ajax, or

I've been struggling to get a contact form working for an entire day. I included the following script at the top of my page: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> This is the structure ...

javascriptphpjqueryhtmlajax

Discover the procedure to alter date formats in MongoDB

I recently created a MongoDB collection using Node.js with the following code: var mongoose = require('mongoose'); var TTTUsersSchema = new mongoose.Schema({ username: String, password:String, active: Boolean, created_at: { type: Dat ...

htmlnode.jsmongodb

Utilize the fetch function within a React functional component

I have been experimenting with different methods to fetch data only once before rendering, but I am encountering some challenges: It is not possible to call dispatch in componentDidMount as there is a restriction that it can only be done in Functional c ...

javascriptreactjstypescriptreduxreact-redux

Adjust the background color of the header as you scroll

Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...

cssangulartypescript

How can I test for equality with an array item using v-if in Vue.js?

Currently, I am facing a challenge in my Vue.js project where I need to determine if a number is equal to an element within an array. Here is the code snippet that I am working with: <div v-if="someValue != arrayElement"> // </div> I am st ...

javascripttypescriptvue.jsecmascript-6

The jQuery scrollLeft function seems to be stuck and not working correctly

I have a container div with a ul inside of it set up like this CodePen: http://codepen.io/example/123 Why won't the scroll feature work? HTML: <div id="container"> <ul class="list"> <li>apple</li> <li>orange& ...

jquerycsshtml

The Angular bootstrap popover vanishes as soon as the mouse hovers over it

Currently, I am facing an issue with an angular bootstrap popover on some text. The problem arises when the user tries to click on a link inside the popover as it disappears. Additionally, when changing from one popover to another, the previous one does no ...

javascriptangularjsangular-ui-bootstrap

What is the most effective way to enlarge an HTML table in the center?

Currently, I am dynamically generating an HTML table using a repeater. The table consists of four columns that I populate with company data. My goal is to enable users to click on a row and have another row appear below it, containing a Google map and addi ...

javascriptjqueryasp.nethtml

What is the best way to incorporate currency formatting into a table using sumtr and datatables?

I have a table where I am utilizing sumtr for the table footer, and displaying all the information within datatables. My requirement is to show all the values as currency. However, I am unable to modify the values after sumtr because it won't be able ...

javascriptjquerydatatables

The jQuery Deferred feature on Ajax is failing to properly pass the array in the data option as an array, instead converting

I am facing an issue in my application where I want to use jQuery deferred to handle Ajax success and error uniformly from a central location. It works perfectly fine when I pass strings in the data option, but when I try to pass an array, it gets sent as ...

javascriptjqueryajaxarraysjquery-deferred

The AJAX POST function is not functioning properly when clicking on contextmenus

Can someone please assist me? I am having trouble sending data via ajax post to my nodejs server from contextmenus. It is not functioning as expected. Although the ajax request does not give any error alert, the data is not being sent successfully. I hav ...

javascriptajaxpostgoogle-chrome-extension