Footer flexbox element not aligning underneath other content containers

After creating a layout using CSS and Flexbox, I encountered an issue with the footer div. When the page loads, the footer is displayed at the bottom of the page. However, as content is added or loaded dynamically, it causes the footer to float in the middle of the page when scrolling. I am struggling to find a solution for this problem.

I attempted to make the footer sticky by setting its position to `bottom: 0px`. While this had some success by adjusting the margins of other divs, it wasn't the most efficient solution. I intended to keep using flexbox attributes to have the divs stack properly, but that approach doesn't seem to be working. I also tried playing around with the min-max heights of the other divs, but whenever the window shrinks below the minimum height, the footer ends up floating above the rest of the content.

If you would like to take a look at the code, you can find it on JSFiddle

.footer{
height:40px;
display:flex;
align-items:center;
justify-content:center;
width:100%;
background-color:purple;
}

I expected the footer to follow the stacking order and display under the rest of the content, similar to how the main body appears beneath the header.

htmlcssflexbox

Answer №1

The '.content' class height is determined by height: calc(100vh - 100px). To keep it flexible, update to min-height: calc(100vh - 100px)

If you prefer the footer and header to always be visible, include overflow: auto for scrollable content

Answer №2

Kindly eliminate the code height: calc(100vh - 100px); from the .content class.

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.bodywrap {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  
  background-color: black;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background-color: brown;
}
.hleft {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  background-color: lightgreen;
}
.hmid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow:1;
  font-size: calc(1.5vw);
  background-color: orange;
}
.hright {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  background-color: pink;
}
.content {
  display: flex;
  
  justify-content: space-between;
  background-color: darkblue;
}
.lmenu {
  display: flex;
  width: 250px;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
  min-height: 600px;
  background-color: lightgrey;
  overflow: hidden;
}
.ltop {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  width: 100%;
  background-color: blue;
}
.lmid {
  height: 50px;
  width: 100%;
  background-color: green;
}
.lbot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 100%;
  background-color: yellow;
}
.rmaincont {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: calc(100vw - 250px);
  background-color: grey;
}
.note {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
  height: 50px;
}
.main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: calc(100vh - 50px);
  min-height: 550px;
  width: 100%;
  padding-left: 20px;
  background-color: red;
}
.footer {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: purple;
}
<!DOCTYPE html>
<html>

<head>
  <title>Mid-Valley Intranet</title>
  <link rel="stylesheet" type="text/css" href="css/cstyle.css">
</head>

<body>

  <div class="bodywrap">

    <header class="header">
      <div class="hleft">Left</div>
      <div class="hmid">Mid</div>
      <div class="hright">Right</div>
    </header>

    <div class="content">
      <div class="lmenu">
        <div class="ltop">
          Top
        </div>
        <div class="lmid">
          Mid
        </div>
        <div class="lbot">
          Bot
        </div>
      </div>
      <div class="rmaincont">
        <div class="note">
          Notice
        </div>
        <div class="main">
          Main Content
        </div>
      </div>
    </div>

    <footer class="footer">
      Footer Text
    </footer>

  </div>

</body>

</html>

Answer №3

To make this work, I implemented the following steps:

  • Initially, the scrolling was occurring on the body. I fixed it by adding overflow: hidden to the body and overflow-y: auto to the div with the "bodywrap" class.

  • Next, I added the position sticky property with vendor prefixes:

bottom: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
  • I also adjusted the height of the "bodywrap" class to be equal to 100vh minus the height of the footer to prevent content cutoff at the bottom. You may consider setting a sass variable for this 40px height.
height: calc(100vh - 40px);

For a demonstration of the updated version, please visit:

jsfiddle.net/webwhizjim/6f84b7su/3/

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

Activate JavaScript functions by pressing the enter key, allowing for various searches, AJAX requests, and DataTable displays to occur seamlessly without the need to refresh

I recently developed a web page that integrates an AWS API interface to interact with an RDS Aurora MySQL Serverless database. Users can input a SQL statement and click the Query button, which triggers an AJAX request, returns JSON data, and converts the d ...

javascriptjqueryhtmlajaxdatatables

Input form and select form collide in conflict when the "Enter" key is activated

My search box includes input forms and a select form with various options. The issue arises when using the place autocomplete feature from Google Maps alongside the select form. When the enter key is pressed after entering a location in the autocomplete fi ...

javascriptjqueryhtmlformsbackbone.js

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem? The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concea ...

htmlcssimagebackground

Using an inline-block within a positioned absolute element

I am curious about the behavior of inline-block elements inside absolutely positioned elements. To better explain, I have provided an example below. We can see in the code snippet why the .icon within the .tag is not displayed like the previous .icon (whic ...

htmlcsscss-position

What is the best way to locate a specific button in jQuery?

How can I determine if the target of a click event is a button element in a document? $(document).click(function(e){ if(e.target.nodeName.toLowerCase() === 'button') { // Do something } Is the code above correct for this purpose ...

jqueryhtml

Ways to move the scroll to the bottom of the div by clicking

Can anyone help with why my scroll code isn't working? I'm trying to make the scroll go to the bottom when I click on $('#openDiv'). For example, when you enter a chat room on stackoverflow, the scroll is automatically at the bottom, a ...

jquerycssscroll

Modifying the dimensions of mat-card in Angular Material

https://i.stack.imgur.com/CP16N.png I am struggling to make both components the same height, similar to the left form. I have tried adjusting margins and padding but nothing seems to work. Below is the HTML code for the parent element: <mat-tab label= ...

cssangularbootstrap-4angular-materialgrid

Deleting the clone <div> while ensuring the main <div> is kept clear of any remaining data

Initially: After adding a new row and then removing it. Why is this happening? When I set val(""), the textbox should have no value. What mistake did I make in my code? Please assist. Here's the code snippet: <div id="rows" class="block"> ...

javascriptjqueryhtmlasp.netclone

Responsive Design and the Importance of Setting Min-Width in Bootstrap 3

After doing some research on Stack Overflow about defining a minimum width for a responsive layout in Bootstrap3, I encountered conflicting answers related to "media queries." My goal is to make my layout responsive up to a certain point. Once it reaches, ...

htmlcsstwitter-bootstrap

Tips for adjusting the border-bottom line in real-time as text is selected from a dropdown menu

$('#select').on('change', function() { name = $('#select :selected').val(); //some code here }); . bdr-txtline { border-bottom: 1px solid black; } <div class="container"> <div class="row"> <div ...

jqueryhtmltwitter-bootstrapcss

Utilizing Multiple Select Options and CSS Float Styling in Mozilla Firefox

I have been attempting to customize the CSS of a multiple select element. While I am satisfied with how it looks on Chrome, I am facing issues getting it to work correctly on Mozilla Firefox. $('option').mousedown(function(e) { ...

jqueryhtmlcss

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

javascripthtmlshopify

New to CSS/Ruby - What causes two adjacent buttons to have varying sizes?

The varying sizes of my search and login buttons located beside each other are puzzling me. Could it be due to the fact that the search button is enclosed within a submit_tag argument while the login button is not? If this is indeed the case, how can I mak ...

htmlcssruby

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

htmlcsscordovaionic-frameworkionic2

What could be preventing the fill color of my SVG from changing when I hover over it?

I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...

javascripthtmlsvgvue.js

How to create a vibrant and colourful full background

How can I make the background color fill the entire width of the page? I am new to HTML and CSS, so below is the code I have used for setting the background. Please provide clear instructions on what changes I need to make in my code to achieve this. I kno ...

htmlcssbackground

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

Modifying the WP FlexSlider plugin to eliminate the previous and next side panels

Is there a way to either reduce the width of the slider's prev/next sides or remove these panels while keeping the arrows to cycle through slides? These elements appear to be within ul.flex-direction-nav. I attempted using ul.flex-direction-nav { dis ...

jquerycsswordpresspluginsflexslider

Troubleshooting a Border Problem in CSS

Just joined this site and I'm new to coding, eager to learn more. I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need. The grey area is 200px wide and ...

cssborder

How do I directly display a variable in index.html using node.js?

Is there a way to retrieve user inputs from the index.html file, process them in Node.js, and then display the result back on the index.html page instead of redirecting to a new page? Form Handling with Express var express = require('express'); ...

javascripthtmlnode.jsexpress