How do I adjust the height of the second element to align with the bottom

This is my unique code

<body class="bodyTag h-100">

<div class="navbar">This Is My Navbar</div>

<div class=" d-flex bg-danger flex-column stretch   ">
    <div class="card-header" style=" background-color: #FF9933; width: 100%;">I am the header</div>
    <div class="card-body stretch flex-fill" style="background-color: #ffff;"> I am the body, stretching until footer</div>
    <div class="card-footer bottom-0 " style="background-color: #138808;">I am the footer at the bottom</div>
</div>

I want the footer to come at the end, fixed on the bottom. And based on it, the second white div must stretch until the footer.

In any resolution, Please help me with fixing the bottom so that only the footer is fixed at the bottom, but the second white div stretches until the footer.

Here is the desired output

javascripthtmlcsssass

Answer №1

It appears that your goal is to adjust the display of whitespace based on the screen height.

I have created a code snippet that may help resolve this issue:

<body class="bodyTag h-100">

<div class="navbar">Navigation Bar</div>

<div style='display: flex; flex-direction: column; height: 100vh;  align-items: stretch;'>
    <div class="card-header" style=" background-color: #FF9933; width: 100% ">Header content</div>
    <div class="card-body stretch flex-fill" style="background-color: #ffff; flex-grow: 1;">Body content</div>
    <div class="card-footer bottom-0 " style="background-color: #138808;">Footer content</div>
</div>

In this code, I set the height to 100vh (the screen's height), aligned the contents to stretch, and applied flex:1 to the white portion so that it takes up the most space. If you want the header, body, and footer to be equal in height, you can simply apply flex:1 to each section.

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

The NextJS App directory consistently stores the retrieved data in the cache, regardless of any no-cache options that may have been configured

Despite trying various online advice, I am still facing the issue of cached fetched data. I am using a mongodb server, and even though I add data to the server, I can only see the new data on the server itself, not on the website (before the NextJS project ...

javascriptreactjsnext.jsfetchnext.js13

Is there a way to transform JSON text into a JSON object?

Similar Question: How do I convert JSON to a JavaScript object? { "data": [ { "name": "JoongBum Lee", "id": "526210623" }, { "name": "\uc774\uc778\uaddc", ...

javascriptjson

Implementing dynamic component rendering and iterating through a list in React JS based on state changes

Trying out React JS for the first time and encountering a couple of issues. 1) Attempting to display a table from a different class upon clicking the show button. However, even when the state is true for showing the table, it doesn't appear. 2) In t ...

javascriptreactjs

A guide on installing a npm dependency module from a local registry domain

I have successfully published a module on my own custom registry domain, located at , and I am able to publish updates to the module there. Unfortunately, I am encountering an issue with dependencies within my published module. For example: "dependencies" ...

javascriptnode.jsnpm

Single-use condition for checkbox functionality in JavaScript

As a newcomer to javascript programming, I am struggling to make a checkbox display two radio buttons only when it is unchecked, even after researching solutions. Here is my current code snippet: <span><strong>Not Available</strong></ ...

javascripthtmlformsif-statementcheckbox

Quiz12 - The Influence of Inheritance on CSS

How will the text size of "Universe" be affected by the following declaration? <div style=”font-size:12px;”>World is<div style=”font-size:0.5em;”>VERY small in <div style=”font-size:100%;”>Universe</div></div>< ...

css

Add an input element to a form fieldset by employing vue

In my form, I have a staged approach with 3 fieldsets that only appear when the "Next" button is clicked. Now, in the third fieldset, I need to add input elements based on keys extracted from an external json object. Data: data: () => ({ c ...

javascriptvue.js

What could be causing the error message "Uncaught ReferenceError: userId is not defined" to appear for me?

Despite the fact that my alert($userId) is displaying 1 (which is the user id), I am still receiving an error indicating that userId is not defined. Any thoughts on why this might be happening? $('.postComment').on('click', function(ev ...

javascriptjquery

javascript - A single image within the array fails to load

I'm encountering a challenge while trying to preload images in an array for later use in drawing on a canvas, such as in a 2D top-down game board. Interestingly, one of these images (which are Greyscale GIFs, by the way) refuses to load. It's evi ...

javascriptarraysimagepreload

Challenges with the dropdown menu navigation bar

I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...

javascriptphphtmljquerycss

Retrieving text from an XPath element with Selenium WebDriver in JavaScript

I've been experimenting with Selenium and Node to extract text content from websites. For instance, I'm currently working with the URL: and using this XPath /html/body/section/div[1]/div[3]/div[1]/div[3]/form/button When I check in an Xpath se ...

javascriptnode.jsseleniumselenium-chromedriver

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Whenever I attempt to run this function, I encounter an issue. My goal is to retrieve the latitude and longitude of an address from Google's API. This error message pops up: core.js:15723 ERROR TypeError: Cannot read property 'geometry' of ...

htmljsonangulartypescript

Expand and collapse navigation menu using Jquery

I am currently working on a navigation list that should open and close when clicked. However, I am facing an issue where using nav ul li.test a to open the hidden ul on click is not working as expected. When I try using nav ul li.test without a, the hidd ...

jqueryhtml

Tips for understanding nested JSON or array data structure?

My data is stored in a constant called translations and it looks like this: { "item-0": { "_quote-translation": "translation Data", "_quote-translation-language": "English", "_quote-trans ...

javascriptarraysjsonnext.jsgraphql

Passing event and arguments when the input changes in a React component

I am working with a component that looks like this: import React from 'react'; import MyComponent from '../utils/MyComponent'; export default class BasicList extends MyComponent { constructor(props) { let custom_methods ...

javascripthtmlreactjs

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

htmlcss

How to effectively filter arrays using Angular.js

One array of objects that I have on hand looks like this: var arr = [{id:1, name: 'frank', type: 'great'}, {id:2, name: 'john', type: 'good'}, {id:3, name: 'mark', type: 'great'}, {id:4, name: &a ...

javascriptangularjs

Extracting data types from XML and converting it into JSON

Below is the XML data that I am extracting: <ArticleIdList> <ArticleId IdType="pii">S0022-3956(14)00106-X</ArticleId> <ArticleId IdType="doi">10.1016/j.jpsychires.2014.03.024</ArticleId> <ArticleId IdType="pubmed">24755 ...

jqueryhtmlxmljsondom

Differences between Sequelize classMethods and instanceMethods

Embarking on my Node journey, I've decided to explore Sequelize. Initially, my focus was on understanding the following code: 'use strict'; var crypto = require('crypto'); module.exports = function(sequelize, DataTypes) { var U ...

javascriptnode.jsormsequelize.js

How to leverage onpopstate in Vuejs without relying on vue-router

I am currently utilizing vue.js in conjunction with laravel, specifically incorporating a vue component within a laravel blade file. My aim is to trigger a page reload upon pressing the back navigation button to return to the previous page. The code I have ...

javascriptjquerylaravelvue.js