Is it necessary to eliminate any extra space at the footer's bottom?

I've searched through various solutions to address this issue online and experimented with fixed, sticky, and absolute positioning as well as adjusting the margin-bottom property. However, I am still encountering a challenge with excessive white space at the bottom! The 'nav' element acts as the footer:


.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: auto;
  left: 0;
  bottom: 0;
  margin-bottom: 35px;
}

.events {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 35px;
}

.nav {
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  background-color: #fbba5c;
  margin-top: auto;
  left: 0;
  color: whitesmoke;
  font-size: 0.5rem;
  font-family: BlinkMacSystemFont, Roboto, Ubuntu, Oxygen, -apple-system,
    "Segoe UI", Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin-bottom: -20px !important;
  overflow: hidden;
}

Do you have any suggestions on what might be causing this issue? Any insights or advice would be greatly appreciated!

htmlcssflexbox

Answer №1

One possible explanation is that the navigation footer has been set to absolute positioning and there isn't enough content between it and the top of the page. One solution could be to increase the minimum height of the middle div to either 100vh or 120vh and change the footer to relatively positioned. This suggestion is just a guess, as the HTML code or a Codepen/jsFiddle link was not provided. You can also experiment with using bottom: 0; when position: absolute is required.

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

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

javascripthtmlcanvas

Populate Vue components in auto-generated HTML code

Utilizing a WYSIWYG article editor, I generate HTML content for articles that is saved in the database and displayed to users at a later time. However, I am facing an issue where I need to embed Vue components within this generated HTML in order to showca ...

javascripthtmlvue.jstrumbowyg

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...

javascripthtmljquerybootstrap-4fetch

I encountered a roadblock with the npx create-react-app command in my-app, as it was getting stuck at the

Here is the command I used to install React I've been wanting to learn React, so I attempted to install it using the command npx create-react-app my-app. The installation process began, installed some files, and then displayed a "done" message in 98 ...

htmlreactjsnpmyarnpkg

Issue with HTML coding containing an embedded mail sending link

Having trouble with a link that contains '&' in the body text when trying to send an email. Here is the code: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <a href = "mail ...

html

Is there a way to implement a bootstrap carousel where only one item moves with a single click?

Having trouble implementing a Bootstrap multi-item carousel with continuous movement after copying code from this source. The effect looks different in my localhost environment. Can anyone provide assistance? Links to CSS and JS Added: <link rel="st ...

javascriptjqueryhtmlcss

Loading images with CSS media queries is an essential technique for optimizing

Currently, I am exploring options to dynamically load a background image based on the width of the browser window. This way, I can optimize bandwidth usage by only loading the image that will be displayed. I am aware that using the HTML picture tag allows ...

cssmedia-queries

Connecting Peers in Windows Store App using HTML/JS

I am curious to find out if anyone has successfully created a peer-to-peer app for the Windows Store using HTML5 and JavaScript. I want client A of the app to be able to establish a connection with and send data to client B through either a TCP or UDP sock ...

javascripthtmlwindows-8windows-store-appsp2p

Different content can be utilized with a single JavaScript code in a Django template by customizing and adapting the code

Working on a web application using Django has presented a challenge. I created an HTML template in Django and embedded JS code for that template as well. The goal is to use this JS code for various types of content displayed with the template, but it' ...

javascripthtmldjangolocal-storage

Designing Buttons and Titles for the Login Page

I'm currently working on developing a straightforward login page in react native and I've encountered some difficulties with styling. Does anyone have tips on how to center the text on the button? Also, is there a way to move the INSTARIDE text ...

javascriptcssreactjsreact-native

Encountering a display:flex problem with postcss in Vue CLI 3

Issue with Vue CLI 3 Configuration In my current setup, utilizing vue cli 3 with all default configurations including autoprefixer and postcss, I have encountered a challenge. The problem arises when using Samsung internet version greater than 7, as the ...

vue.jsflexboxpostcssvue-cliautoprefixer

Converting HTML to PDF using JavaScript

My goal is to create an HTML page and then print and download it locally as a PDF. However, when I try to generate the PDF, it cuts off the last 3 to 4 lines of the page. I want to create multiple PDF pages in A4 size with the same styling as the HTML pa ...

javascripthtmljquerycss

Adjusting Dropdown Direction Based on Section Location – A Step-by-Step Guide

Question: Is there a way to adjust the bootstrap dropdown so that it can appear either above or below depending on where the section is positioned? Check out my code here Here is the CSS I am using: #cover-inspiration{ width: 100%; height: 100vh ...

jqueryhtmlcsstwitter-bootstrap

Tips for executing a function on a specific class selector using the document.getElementsByClassName method

When I click on a specific class, I want to implement a fade-out function in JavaScript. However, I am struggling to make a particular class fade out successfully. I attempted to use the this keyword, but it seems like I might be using it incorrectly bec ...

javascripthtmlcss

Acquiring the applicable CSS for a JavaFX 8 widget

While working on JavaFX styling with CSS, I encountered a challenge in understanding which CSS properties are directly affecting the appearance of a GUI widget. It reminded me of using Firefox web developer tools to inspect elements and view the specific s ...

javacssjavafx-8

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

I have an onchange function that triggers when the "pending" option is selected in a select dropdown menu. This function adds a predefined value to an input field. However, I also want this functionality to apply when the page loads. Currently, the "pendin ...

javascripthtml

Ensure that the text remains in the forefront while applying a scaling effect to the image

My image gallery features a hover effect that utilizes a CSS transform when the user hovers over the images. transform: scale(1.1); Before the hover effect, the image appears like this: https://i.sstatic.net/fiP5e.jpg And with the effect applied, it loo ...

htmlcssimage

Center alignment is not possible for the Div element

Problem Every time I attempt to implement the following code (outlined below), the div only appears centered when using width: 100px;. <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; mar ...

javascripthtmlcsscenter

The marriage of a sticky and floating navigation bar using the power of Bootstrap 4

I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this pro ...

htmlcssinternet-explorerbootstrap-4navbar

A single image with dual clickable areas managed by an interactive image map

Is there a way to attach two href links to one image using CSS? I want it to function like an old school image map, but purely with CSS. Is this something that can be done? The current HTML code looks like the example below. However, I need the image to h ...

htmlcssimagemap