Expansion Issue: Div in Main Section Not Adapting to Parent Width in Bootstrap Flex Layout

I have a Bootstrap 5.2 header/main/footer layout where I want the main section to expand and fill the page between the header and footer completely.

The code below is currently working:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7373686f686e6f4e263d322f">[email protected]</a>/dist/css/bootstrap.min.css">

<body class="d-flex flex-column min-vh-100">
  <header>
    H
  </header>
  <main class="flex-grow-1" style="background: blue;">
    <div style="background: yellow; height: 100%;">
      M
    </div>
  </main>
  <footer>
    F
  </footer>
</body>

However, I want the div inside the main section to completely fill its parent both horizontally and vertically. Right now, it is only filling horizontally. What could I be missing?

htmlcssflexboxbootstrap-5

Answer №1

After including the following in my CSS:

html, body {
  height: 100%;
  width: 100%;
}

The issue has been resolved.

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

Creating an array object in JavaScript is a straightforward process that involves using the array

Looking to achieve the following object list structure: myObj = {"foo":[1,2,3,4], "bar":[3,5,7,8]} Initial attempt was unsuccessful: var myObj = new Object(); myObj["foo"].push(1) myObj["foo"].push(2) #...etc Seeking guidance on the correct m ...

javascripthtml

What is the best way to eliminate the log of the Internet Explorer web driver?

Currently utilizing watir-webdriver in conjunction with Ruby on Windows 7 to test various pages. Upon initiating Internet Explorer using watir-webdriver, the following logs are generated: Started InternetExplorerDriver server (32-bit) 2.32.3.0 Listening o ...

rubyinternet-explorerhtmlwatir-webdriver

Determining the class condition using AngularJS ng-class

I am working with an HTML element that contains AngularJS directives: <div class="progress"> <span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ...

javascripthtmlangularjs

Sending JavaScript functions to PHP files via Ajax

My Current Project: I am currently developing a script that provides users with choices and generates new options based on their selections. To achieve this, I have created two scripts - one for the HTML structure of my page and another for fetching serve ...

javascriptphpjqueryhtmlajax

Using Javascript code to draw particles at the cursor's position and then directing those particles towards the bottom of

I found an interesting JavaScript code snippet that creates a bubble particles effect around the cursor. You can download it from https://github.com/tholman/90s-cursor-effects. However, I encountered a problem when adding certain elements inside a specifi ...

javascripthtmlcssweb

The fading effects are not functioning as expected in the following code

Hey there, I'm not the most tech-savvy person, but I managed to come up with this code for page redirection. Unfortunately, I couldn't quite get the fade out and fade in effects to work properly when executing it. If anyone out there can help me ...

javascripthtml

Troubleshooting Problems with Fancybox Scaling on Small Landscape-Oriented Mobile Devices

Issue Description: In my responsive web design, I am utilizing Fancybox v2.1.5. The problem arises when smaller mobile devices with a more rectangular shape than square are used. In portrait orientation, when invoking Fancybox, it expands to the width of ...

javascriptjquerycssfancyboxfancybox-2

Unfortunately, the input type number does not allow for the removal of decimal points

I need assistance with modifying the HTML code below. I want to remove the decimal point from the input field. Could anyone please provide instructions on how to accomplish this? <input type="number" min="0" step="1" ng-pattern="/^(0|[1-9][0-9]*)$/" ...

javascriptangularjshtml

Automatically populating form fields with Selenium (less-than-stellar HTML present)

My current task involves: Entering my email Clicking submit If the message "check again later" is displayed, repeat until the message changes to "you are in!" Here's the code snippet I have written so far: PATH = "D:\Program Files (x86)&bs ...

pythonhtmlselenium

Creating extensive pianoroll visualization using HTML and JavaScript

Currently, I am focusing on developing an HTML5 audio application utilizing the latest Web Audio API, and I require a "pianoroll" feature. This is essentially a keyboard grid where users can draw notes, similar to what is seen in many music production soft ...

javascripthtmlcanvashtml-table

The functionality of Bootstrap styles is not compatible with Code Igniter

I tried placing the bootstrap folder in the root folder and loading the styles in the header section of view files like this. Unfortunately, it didn't work as expected. Can someone please assist me in solving this issue? <link href="<?php e ...

phpcsstwitter-bootstrapcodeigniter

How can I send form data using libcurl in C++ for a particular form?

How can I post and submit form data using libcurl and C++ for the form below? <form id="loginContainer" class="controllerContainer" action="/j_spring_security_check" method="post"> <h2>Login</h2> <hr> <fieldset> <div ...

htmlc++formslibcurlfieldset

Flexbox does not seem to be cooperating with CSS Auto Width

Hello Overflowers, I've designed an HTML page with the following specifications: 1. Resetting HTML, BODY, DIVs, and SPANs to have no border, padding, margin, or outline 2. Setting display properties for HTML, BODY, and DIV elements 3. Defining hei ...

csslayoutflexbox

How can I center an image next to text on two lines, that is compatible with IE7?

I am trying to align an image (logo) with text in two lines - the website title and a brief description. Here is my attempt using HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...

cssinternet-explorer-7

Utilizing hyperlinks within NicEdit content and managing events with jQuery

I am using nicEdit, a rich editor, on my website to insert hyperlinks into the content. While I can successfully add hyperlinks using the setContent() method after initializing nicEdit, I am facing issues with handling click events for hyperlinks that have ...

javascripthtmljquery-uihyperlinknicedit

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Looking to tidy up my HTML/CSS. Is there a way to keep this JavaScript functioning without needing to add the class name to every li element within the ul? Any suggestions on how to improve the visual appeal and readability of the HTML code? const Profi ...

javascripthtmlcss

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

javascripthtmlvue.js

Develop a custom script function for every instance of a @foreach loop

I have a challenge where I need to style automatically generated table rows by clicking on a button. Currently, my code appears as follows: @foreach($tours as $tour) <tr id="{{$tour->id}}"> <td> {{$tour->tournr}} &l ...

javascripthtmllaravel

One function is failing to execute properly due to multiple if conditions

Take a look at my JavaScript code below: function showLater1() { if ((vidos.currentTime >= 30) && (vidos.currentTime <= 34)) { lay.style.opacity = "1"; content.style.opacity = "0"; controls.style.opacity = "0"; ...

javascripthtml

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

javascriptjquerycssselenium