Change the height of a <div> element to match the height of the window on a Bootstrap website

In my Bootstrap 4 website, I have a header, navbar, content-area, and footer. To see a live demo of the website, you can visit my JSFiddle link: https://jsfiddle.net/26zda5xv/2/
Check out the screenshot of the website here: https://i.sstatic.net/aMvH9.png

I'm looking to make the container fill out the whole page/window height minimally (min-height?) by extending the height of the 

<div id="content">
.

This solution should adapt to different screen resolutions and devices automatically. How can this be achieved correctly based on the JSFiddle? Is there a pre-built solution in Bootstrap 4 for this specific task?

Any guidance on this matter would be greatly appreciated!

javascriptcsstwitter-bootstrapbootstrap-4

Answer №1

To solve this issue, follow these 2 steps:

  1. Apply the d-flex flex-column min-vh-100 classes to the container element.

  2. Add the flex-grow-1 class to the content div.

View demo on JSFiddle

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

<body class="bg-secondary">

  <div class="container bg-white shadow border border-dark d-flex flex-column min-vh-100">

    <img src="http://www.apexcartage.com/wp-content/uploads/2014/05/placeholder-blue.png" class="img-fluid" alt="Responsive image">

    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>

    <div id="content" class="my-3 flex-grow-1">
      <p class="h3">Content</p>
    </div>

    <footer>

      <div class="bg-dark text-white mt-4 p-3 border-info" style="border-top: 4px solid">
        <h5 class="title">Footer</h5>
      </div>
      <div class="bg-info p-1"></div>

    </footer>

  </div>

</body>

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

When working with Vue in Laravel, the console may show that app.message is returning undefined

Recently, I embarked on my journey to learn Vue and have been closely following their introductory guide. However, I seem to be facing a hurdle at this point: Simply open your browser’s JavaScript console and adjust app.message to a different value. I ...

javascriptphplaravelvue.jslaravel-5

Generate captivating background visuals with animated elements that evolve over time

I need help creating a dynamic background image that transitions smoothly every few seconds. The current code I have doesn't include animation, and the images are taking too long to load. Is there a way to optimize the loading time? Here's my ex ...

htmlcssanimationbackgroundbackground-image

lite-server is failing to serve the .js file located in the /js directory, resulting in the browser not sending a request

I am currently using a lite-server by running npm run lite Despite my jQuery file and CSS being loaded without issue, the browser is not even attempting to make a GET request for the main.js file. The main.js file is located in the /js folder, just like ...

javascriptnode.jsnpmlite-server

Bootstrap does not show submenus on its navigation menus

I am currently designing a menu with Bootstrap, but for some reason, the submenu items are not showing up. https://i.stack.imgur.com/qZqyf.png After carefully reviewing the HTML code multiple times, I am unable to identify any issues. I am now questionin ...

javascripthtmlcsstwitter-bootstrap

Error message from Google Adsense: The registration landing URL modifier is null

For the past few days, I've been encountering a persistent error message on all web pages where I have Adsense banners: "Uncaught TypeError: Cannot call method 'registerLandingUrlModifier' of null" I have been using the asynchronous script ...

javascriptasynchronousadsense

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

I am currently using a slider function called Slick by Ken Wheeler. It is currently being loaded in the footer with just two variables. $('.slickSlider').slick({ dots: true, fade: true }); Currently, ...

jquerycssjquery-pluginssliderslick.js

What is the best way to retrieve the current font size of a link element?

Is there a way to determine the font size of an element in pixels or points? Are there alternative methods available to achieve this? I am looking to increase the size of <a href="...">MAKE ME BIGGER</a> by 130%, 140%, N% based on its current ...

javascript

JavaScript (Node.js) Trouble: Difficulty in Assigning Values to a Two-Dimensional Array

In my current situation, I am facing an issue where assigning a value in a 2D array at a specific row and column results in that value being repeated across multiple rows within the same column. var Matrix = Array(3).fill(Array(3).fill(0)); console.log(M ...

javascriptnode.js

Utilizing ng-model in AngularJS to add data to an array in Mongoose and MongoDB

I am currently utilizing ng-model to input data into my MongoDB. Is there a method to utilize ng-model to insert data into an array within MongoDB? answers is an array that should include 4 strings entered by the user. I attempted adding [0], [1], [2], [3] ...

javascriptangularjsarraysmongodb

The clear button in md-autocomplete with md-clear-button="true" does not appear on the screen

I am encountering an issue with the <md-autocomplete> component as demonstrated in this example: The <md-autocomplete md-clear-button="true"> feature does not seem to be functioning. I would expect a clear button (cross) to appear at the end o ...

javascriptangularjsangular-materialmd-autocomplete

Comparing npm start and running the app with node app.js

I'm brand new to exploring the world of Node and understanding the basics of app development. I find it interesting how these two commands seem to have a similar output: node app.js --compared to-- npm start Both commands appear to continue "l ...

javascriptnode.jsexpressnpm

Execute a zoom out action by pressing the (Ctrl) and (-) keys simultaneously in Javascript

I'm trying to figure out how to simulate a Ctrl - zoom out using Javascript. I've noticed that using the style zoom property or the transform property gives different results with white space in the corners, rather than the smooth zoom out effect ...

javascriptjqueryhtmlcss

Launching a Vue Cli 3.10.0 project on a designated port

Is there a way to consistently serve a Vue CLI project on a specific port, like 8888? I've tried various methods without success. Adjusting the serve script in package.json to include the flag --port 8888 Updating the devServer option in vue.config. ...

javascriptvue.jsvuejs2vue-cli-3

Error in Next.js when the value of the target does not change in React-Select's

I am brand new to the world of react/nextjs and I keep encountering a frustrating error that says "Cannot read properties of undefined (reading 'value')". Despite trying various approaches, including treating select as a simple HTML tag, I have s ...

javascriptreactjsnext.jsreact-select

What is the highest image size that desktop Chrome can accommodate?

Let's delve into a specific scenario amidst the vast possibilities. Assume the following technical specifications: Browser: Chrome Latest (Desktop) Hardware: Windows Standard PC with default Intel Graphics card Ram: 8GB Processor: i7 @ 3.40 GHz The ...

javascripthtmlcssimagegoogle-chrome

Transferring class titles between div elements

I would like to implement a feature where class names on div elements shift after a brief delay, perhaps 10 seconds. My goal is for the 3 classes listed below to cycle through the div elements and start over once it reaches the last one. For instance: & ...

javascriptjqueryhtmlcss

Calculating a total without the need to round it to the nearest two decimal points

Excuse my lack of expertise in this area. I recently asked a question about rounding off numbers to two decimal places. Now, how can I calculate the sum of these numbers but display only the two decimals without rounding them off? I am working with JavaScr ...

javascriptdecimal

What steps should I take to eliminate the gap between two side panel components?

Let's take a look at the concept I am working on: https://i.sstatic.net/RyQAB.png I'm aiming to extract the statistics element within the red outline. The spacing issue between the stats and balance panels perplexes me. To align these panels to ...

htmlcss

Issues with loading Ruby on Rails 4.0 and JavaScript in combination

I am facing an issue with my JavaScript file named "front.js" that I load from "application.js" using the usual code: //= require front Within "front.js", there are several functions that I want to trigger when the document is ready, like this: $(docume ...

javascriptjqueryruby-on-railsruby-on-rails-4

The v-html command displays unprocessed HTML code on the webpage

This is a visual representation of my component: <template> <div v-html="someHtml"></div> </template> <script> export default { name: "test", props: { someHtml: String, }, } </script&g ...

javascriptvue.jsstorybook