How come my justify-content property isn't functioning properly with Flexbox?

I've been racking my brain trying to solve this. The goal is to have all the boxes neatly grouped together, but for some reason there's a massive gap between the main content and footer. Could someone lend a hand?

CSS

Below is the CSS code relevant to the three boxes...

body{
     display: flex;
     flex-direction: column;
     justify-content: start;
     flex-wrap: wrap;
     height: 100vh;
     width: 100vw;
     margin: 0;
 }
 header{
     background-color: white;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     width:100vw;
     height: 10vh;
     margin: 0;
 }
 main{
     background-color: #f1f1f1;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     width: 100vw;
     height: 85vh;
     margin: 0;
 }
 footer{
     background-color: #666666;
     height: 4vh;
     width: 100vw;
 }
<body>
    <header>
        <div id="headercontentwrapper">
            <div id="logowrapper"></div>
            <div id="navwrapper"></div>
        </div>
    </header>
    <main>
        <div id="contentwrapper">
            <div id="contentheaderwrapper"></div>
            <div id="actualcontentwrapper"></div>
        </div>
    </main>
    <footer>
    </footer>
</body>

Even when I set MARGIN TO 0 FOR THE FOOTER, IT DOESN'T FIX THE ISSUE.

htmlcssflexbox

Answer №1

Consider using flex instead of height for your flexbox children. 

body{
       display: flex;
       flex-direction: column;
       justify-content: stretch;
       flex-wrap: wrap;
       height: 100vh;
       width: 100vw;
       margin: 0;
   }
   header{
       background-color: white;
       display: flex;
       flex-direction: row;
       justify-content: center;
       flex-wrap: wrap;
       width:100vw;
       flex: 0 0 10vh;
       margin: 0;
   }
   main{
       background-color: #f1f1f1;
       display: flex;
       flex-direction: row;
       justify-content: center;
       flex-wrap: wrap;
       width: 100vw;
       flex: 1;
       margin: 0;
   }
   footer{
       background-color: #666666;
       flex: 0 0 4vh;
       width: 100vw;
   }
<body>
  <header>
    <div id="headercontentwrapper">
      <div id="logowrapper"></div>
      <div id="navwrapper"></div>
    </div>
  </header>
  <main>
    <div id="contentwrapper">
      <div id="contentheaderwrapper"></div>
      <div id="actualcontentwrapper"></div>
    </div>
  </main>
  <footer>
  </footer>
</body>

Answer №2

It looks like your code is correct, so the issue might be caused by something else.

Also, I have created a snippet and fixed some of your tags for you.

body {
display: flex;
flex-direction: column;
justify-content: start;
flex-wrap: wrap;
height: 100vh;
width: 100vw;
margin: 0;
}

header {
background-color: white;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 100vw;
height: 10vh;
margin: 0;
}

main {
background-color: #f1f1f1;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 100vw;
height: 85vh;
margin: 0;
}

footer {
background-color: #666666;
height: 4vh;
width: 100vw;
}
<html>
<head>
</head>
<body>
    <header>
        <div id="headercontentwrapper">
            <div id="logowrapper"></div>
            <div id="navwrapper"></div>
        </div>
    </header>
    <main>
        <div id="contentwrapper">
            <div id="contentheaderwrapper"></div>
            <div id="actualcontentwrapper"></div>
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>

Answer №3

To fix the issue, simply delete the height: 85vh; in your main element. The reason for the large margin between the main and footer is that your body is set to 100vh height while the main only takes up 85vh.

I hope this resolves the problem for you!

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

An original phrase hidden within the Python3 source code of an HTML webpage

Seeking guidance on extracting specific text from an HTML document using Python3. One example involves utilizing the search engine . The goal is to perform a key search for var error=document.getElementById; and display the content within the parentheses, ...

pythonhtml

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...

javascriptjqueryhtmlcss

The width:auto attribute for images in ie6 is not functioning as expected

I am facing a challenge with dynamically changing and resizing an image element to fit its container. My current approach involves: Resetting the image: // Ensuring the 'load' event is re-triggered img.src = ""; // Resetting dimensions img. ...

javascripthtmlcssinternet-explorerinternet-explorer-6

Guide on automatically removing a DOM element in Jquery after a set amount of time

Is there a way to delete an HTML element after a specific period of time? If a certain condition is met before the allotted time, I want to pause the timer from deleting the element. Here's a snippet of code for reference: <ul> <li dat ...

javascriptjqueryhtmlnode.jstimer

Ensuring proper functionality of JQModal when displayed above an iframe with the usage of ?wmode=

Here's an interesting one... I'm currently working on a site with JQModal and everything seems to be functioning properly except for the fact that the iframe appears on top of the modal. An easy fix is to append ?wmode=opaque at the end of the ...

javascripthtmliframejqmodal

What is the most effective way to populate an element using jQuery?

When you click a button with jQuery, I am generating a modal (Bootstrap modal) as a string. This modal has two option classes: Call Today and Call Tomorrow, which seems fine so far. Upon clicking the button, the modal is created, prompting me to add two a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Designing a multi-platform web browser application for Android, iOS, and Windows 10

I've developed several web applications using HTML5 technology and now I'm interested in creating my own custom web browser specifically tailored for my apps/sites. I want it to have a native appearance, but essentially just wrap around my web ap ...

androidioshtmlgoogle-chromebrowser

Choose the initial offspring from a shared category and assign a specific class identifier

I am trying to figure out how to apply the "active" class to the first tab-pane within each tab-content section in my HTML code. Here is an example of what I'm working with: <div class="tab-content"> <div class='tab-pane'>< ...

javascriptjqueryhtmldom

Using the cordova-plugin-file to access and play video files stored on an external SD

I am in need of assistance with displaying an image and playing a video file from the root directory of an external SD card in my Cordova wrapped HTML project. I couldn't find a suitable place to ask these questions on the GitHub page for the cordova- ...

androidhtmlcordovavideocordova-plugin-file

What is the best way to combine two sections in html/css/bootstrap?

I've been trying to create a simple webpage with a navigation bar and a section below it, but I keep running into an issue where there's unwanted white space between the nav bar and the next section in blue. Is there a way to eliminate this gap a ...

javascripthtmlcssbootstrap-4

Learn how to call class methods using jQuery events by utilizing the on() method

I'm attempting to create a reusable "component" using both HTML5 and accompanying JavaScript code that can be utilized multiple times. First, let's examine the HTML5 component code: <div class="listEditor" id="myStringList"> <div id="li ...

javascriptjqueryhtml

Prevent children from extending outside the boundaries of their parent

I am facing an issue with my page layout that includes a sidebar. The content in the sidebar is overflowing the page, so I attempted to use CSS properties like overflow-y: hidden and max-height: 100vh on the main element, as well as overflow-y: auto on the ...

cssbootstrap-5

CSS transform causing scrolling issues in Microsoft Edge browser

Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...

htmlcssoverflowcss-transformsmicrosoft-edge

Maintain selection from the drop-down menu

I have three different pages: register.php, view.php, and edit.php In the edit.php page, I am trying to maintain a dropdown option that defaults to the first option available. Here is a breakdown of my pages: REGISTER.PHP <form id="base" method="po ...

phpjqueryhtml

JavaScript animation for sequencing traffic lights

I have been working on completing a task that was assigned to me. (iii) Explain the organization of an array that could manage the traffic light sequence. (iv) Develop a script that utilizes the array outlined in part (iii) to create an animated display ...

javascripthtmlarrays

The basic CSS container fails to properly align its elements as intended

Recently, I created a CSS div using Bootstrap and added some custom styling. You can check out the fiddle for a live demo of the code: https://jsfiddle.net/w9gyc0t5/. Here's the actual code: <!-- Bootstrap docs: https://getbootstrap.com/docs -- ...

htmlcss

Ways to adjust the visibility of a div element multiple times using javascript and css

I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...

javascripthtmlcssdjango

Tips for choosing the initial paragraph within a div that has a designated class (CSS 2)

I have a <div> that contains multiple <p> elements, and I want to apply specific styling only to the first <p> within each <div> with a unique class called cnt. Please take note that this question may seem similar to others on SO, ...

htmlcsscss-selectors

Issues arise when trying to use JQuery in conjunction with JSON data

I've been working on a project that involves creating a dynamic dropdown list, but I've run into an issue with jQuery and JSON. This is my first time working with JSON, so I'm still getting the hang of it. Despite googling for solutions, I h ...

jqueryhtmljson

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade