Difficulty filling height with Bootstrap 4 flex-grow

I am in need of creating a layout with a header div at the top (that can be filled with content), a footer div at the bottom, and a middle div with an adaptable height to fill the entire screen.

Check out my code below:

<div class="container-fluid p-0" style="background-color:brown">
  <div class="flex flex-column">
    <div class="flex" style="background-color:aqua">Header</div>
    <div class="flex flex-fill" style="background-color:yellow">This div should have variable height</div>
    <div class="flex" style="background-color:aqua">Footer</div>
  </div>
</div>

After running this code, you'll notice that the yellow div does not expand to fill the available space, maintaining the same height as the header and footer. The entire webpage will also have a brown background.

Any ideas on how to fix this issue?

htmlcssbootstrap-4

Answer №1

It is essential for the parent container to have a specified height. For instance, you can utilize min-vh-100 to set it as viewport height...

<div class="container-fluid p-0" style="background-color:brown">
    <div class="d-flex flex-column min-vh-100">
        <div class="d-flex" style="background-color:aqua">Header</div>
        <div class="d-flex flex-fill" style="background-color:yellow">This portion should vary in height</div>
        <div class="d-flex" style="background-color:aqua">Footer</div>
    </div>
</div>

Remember, the class for display:flex is d-flex

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

Show a notification on the screen if the source of the iframe is blank

Is there a way to show a message "Please click on a match to get started" when no match link has been clicked? For example, when the iframe does not have an src attribute. My backend is built on Django. Below is the HTML code snippet: </form><b ...

htmljquerycssdjangoajax

Allow iframe to be edited within jsfiddle

I have a question that I need to ask soon, but first I need an editable iframe in jsfiddle. It's working fine on my local machine, but not on jsfiddle. I believe it's because of the frames being used? On my local machine, I use: setTimeout(&apo ...

javascriptjqueryhtmliframejsfiddle

Display an image file using the <img src=""> tag in PHP

I am facing a small issue and could use some assistance. My goal is to display the ROW image associated with each unique ID in my database. Below is an excerpt from my PHP code: while ($row = $result->fetch_assoc()) { // Display the image ...

phphtml

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

phpjavascriptjqueryhtmlforms

Establishing the initial value of a <select> element

My webpage features a table that displays the details of past order history, with columns for Order, Date, and Review. For the Review column, I am seeking to add a select dropdown with various options. Upon the initial page load, I would like the select d ...

javascripthtml

Is JavaScript generating a random sequence by dynamically adding fields?

I'm encountering an issue with my button that adds a set of text fields every time I click on the Add More button. The problem is that when I add new text fields, they are appended above the Add More button. Then, pressing the button again adds more t ...

javascriptphpjquerycssdynamic

Error occurs when SRCSET loads the wrong size because "sizes" parameter is missing

According to the guidelines, when sizes is not specified in the image attribute, the browser should automatically calculate the required size based on CSS rendering. In this scenario, my image is 300px and the browser should select the 300px image. Howeve ...

htmlcsssrcset

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

jqueryhtmlcsstwitter-bootstrap

Determining height of an element in AngularJS directive prior to rendering the view

As I dive into the world of Angular, any assistance is greatly welcomed. My goal is to vertically align a div based on screen size (excluding the header and footer) when the page loads, the window resizes, and during a custom event triggered by the user ex ...

javascriptcssangularjs

What materials are required in order to receive messages and information through my Contact page?

Currently, I am pondering the optimal method for gathering information from my Contact page. I have already created a form; however, I'm unsure how to send the gathered data to myself since I am relatively new to Web development. Angular is the framew ...

javascripthtmlangulartypescript

Is it possible to convert HTML to PDF on the server?

A PDF file is being created from an HTML file using the princexml pdf converter package. The data for the HTML file is provided by the server. In the browser, jQuery is used to generate the input string (HTML code) for creating the PDF. Once the input stri ...

jqueryhtmlprincexml

Do not incorporate a div in the overlay

I have an image inside a container. When hovering over the image/container, overlay information is displayed (which is currently working correctly). The overlay should cover the entire container (the grey part) where the image is located. The product-tit ...

htmlcss

Creating a Personalized Dropdown Menu Within the <div> Tag

My current task involves obtaining an element in the following format: https://i.sstatic.net/uhHkL.png Inside the nav-item, there is a dropdown with a top-centered triangle on it, and the dropdown is positioned at the center. Below is what I have achiev ...

htmlcssdrop-down-menubootstrap-4

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

csscss-animations

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to ach ...

cssiconsdartangular-dartgoogle-chrome-app

disabling responsiveness in Bootstrap 2

I am facing an issue with Bootstrap version 2 where I am unable to fix the grid layout. Even after wrapping all my HTML elements in a container, the layout still behaves unpredictably on different screen sizes. Here is a snippet of my code: <header> ...

htmlcsstwitter-bootstrap

Which is better for SEO: using H tags or image alt text?

In need of a major website title that stands out. Which SEO solution reigns supreme? Implementing an image with alt text "my crucial page title" Utilizing h1 tags for the "my crucial page title" text ...

htmlseo

The image sits on the edge of the container, not fully contained

.sub2 { background-color: #FFFFBF; margin-top: 30px; height: 410px; width: 100%; } h1.sub2 { font: bold 100px american captain; text-decoration: underline; float: right; } p.sub2- { font: italic 25px american captain; margin-top: -300px; ...

htmlcss

The alignment of bullets in CSS property list-style-position is off

I'm encountering an issue with aligning the list items. I've been using the CSS property list-style-position: inside; Typically, the bullet points appear outside of the text, like this: https://i.stack.imgur.com/LcVB0.png This doesn't seem ...

htmlcss

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

How can I display the selected value from a dropdown in a text box at the current cursor position? I am currently using the following code: enter code selectChangeHandler(event: any) { this.selectedID = event.target.value; // console.log("this.selecte ...

javascriptcssangulartypescript