The footer on my page seems to be having trouble connecting with the div section above it, causing it to abruptly halt in the middle

After spending a considerable amount of time, I managed to make my footer responsive by sticking it to the bottom of the page regardless of which page you are on. The code that achieved this is as follows:

position: absolute;
bottom: 0;

However, the issue I am facing now is that on certain pages, the footer gets stuck in the middle instead of staying at the bottom. It seems that the footer div does not properly recognize the wrapper (body) div above it on these specific pages. Consequently, the footer stops at a certain point while the body keeps expanding.

An example of this problem can be seen at

I believe there is a simple solution in the form of a line or two of CSS that will resolve this issue. Any assistance would be greatly appreciated!

css

Answer №1

To keep it at the bottom, you should set the position to fixed.

#footer-bottom {
    position:fixed;
    bottom:0;
}

This will make sure it stays stuck at the bottom of the page.

Fixed means its position is based on the browser window, while absolute refers to its place on the page itself.

Just a side note, responsive in web design actually pertains to the page adjusting to the width of the screen. It's good to know for any future inquiries to prevent confusion.

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

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...

javascriptjqueryhtmlioscss

Does the downloading of images get affected when the CSS file has the disabled attribute?

Is it possible to delay the download of images on a website by setting the stylesheet to 'disabled'? For example: <link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled> My idea is to enable the link later to tri ...

javascriptcss

What is the best way to incorporate CSS into this HTML document?

Content has been omitted. It is crucial to review documentation in advance in order to reduce repetitive inquiries. Check out the Webpack v2 documentation. ...

csswebpackcss-loader

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling: #footer { height: 100px; background-color: #F3F3F3; position: absolute; bottom: 0; } Although the footer is displaying at th ...

htmlcss

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

cssadminlte

Is it possible to maintain a div's height in proportion to its width using CSS?

Is it possible to set a CSS variable so that my div's height is always half of its width, and the width scales with the screen size (in percentage)? <div class="ss"></div> CSS: .ss { width: 30%; height: 50% of the width; } This ...

htmlcss

The header and footer elements must be included along with a main div to house the content on the webpage

I am currently working on building a website using HTML and CSS. I would like to create an index.php file that calls all the different parts of the page. For example, I want to include the header and footer, and also have the ability to replace content wit ...

phphtmlcss

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Explore three stylish ways to showcase dynamic JavaScript content using CSS

Objective: For Value 1, the CSS class should be badge-primary For Value 2, the CSS class should be badge-secondary For all other values, use the CSS class badge-danger This functionality is implemented in the handleChange function. Issue: Current ...

javascriptcssreactjs

Error in CSS Header - Position Shifts when Hovered Over

UPDATED HEADER HTML/CSS I am currently working on the header section of my website at . I encountered a bug where, upon hovering over the links in the header from right to left, the positions of the links become disorganized. I am unsure of what might be ...

jqueryhtmlcss

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss

Encountered an error while trying to download a PDF document in React

I'm currently working on adding a button to my website portfolio that allows users to download my CV when clicked. The functionality works perfectly fine on my localhost, but after deploying it to AWS Amplify, I encountered an error. The error occurs ...

javascripthtmlcssreactjsnpm

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

htmlcss

Proper techniques for enlarging a background image using CSS

When utilizing the CSS scale() function along with a transition and transform on a div element that contains a high-quality background image, I noticed that the image becomes blurry when zoomed in. How can I achieve a smoother zoom effect for high-quality ...

htmlcsszooming

Using Node.js and Express, the CSS does not load due to route parameters

I'm currently working on a basic website project using Node.js, Express, and the EJS template engine. I've run into an issue where my external CSS files are not loading properly on routes that contain route parameters. Here's a snippet of my ...

cssnode.jsexpress

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

htmlcssionic4

html how to delete the beginning and end of hr element

There is a <hr noshade> tag in my HTML code which does not have any effect on the web view. However, when I print it to a PDF file, it shows head and tail like this: https://i.stack.imgur.com/TaBAc.jpg Here is my CSS that applies styling when print ...

htmlcss

Leveraging CSS or JavaScript for Displaying or Concealing Vacant Content Sections

I'm working on developing a page template that utilizes section headers and dynamically pulled content from a separate database. The current setup of the page resembles the following structure: <tr> <td> <h3> ...

javascriptjqueryhtmlcss

NextJS application failing to display SVG icon in the absence of internet connection

https://i.stack.imgur.com/M9reE.jpg https://i.stack.imgur.com/Yyg4g.jpg Upon inspection of the provided images, it is evident that the src URL points to a location within the nextjs public folder. The issue arises when there is no internet connection - i ...

javascripthtmlcssreactjsnext.js