What could be causing my footer to appear anywhere but the bottom of the page?

I have been struggling to position the footer of my webpage at the bottom, but it seems to be stuck in the middle.

Despite watching tutorial videos and attempting to follow along, I haven't been able to resolve this issue.

Admittedly, my code is a bit messy as I've pieced together bits from various YouTube tutorials without success in fixing the footer problem.

body {
  margin: 0;
  padding: 0;
  background: #004882;
  height: 100px;
  display: flex;
  flex-direction: column;
}

html {
  height: 100px;
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 150px;
  display: black;
  background-color: #101010
}

.logo {
  height: 100%;
  display: table;
  float: left;
}

... (CSS code continues)

<footer id="footer">
  <h1>This is a footer</h1>
</footer>

htmlcssfooter

Answer №1

To create a fixed footer in CSS, include bottom: 0; in your footer selector:

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: black;
    color: white;
}

Answer №2

By applying display:flex to the body, you have unlocked the potential of flexbox for your layout. Take advantage of this by using align-self on the footer element:

#footer {
        height: 100px;
        width: 100%;
        background: black;
        color: white;
        align-self: flex-end;
    }

This technique is well-supported in modern browsers. For older browser compatibility, consider using position:absolute and bottom:0 for #footer.

Additionally, note that setting a fixed height of 100px for html and body elements may cause them to be smaller than the content. To address this, consider setting their height to 100% for a better fit. :-)

Answer №3

Your CSS properties are causing the flex behavior to override the passive footer placement. To fix this issue, wrap everything except for the footer in a div and apply a CSS rule setting the flex property of that wrapper to 1. Remove any unnecessary position: absolute rules and display types.

If you want a sticky footer that stays at the bottom of the browser window, it's a slightly different process. The current suggestion is specifically for placing the footer at the bottom of the content.

<html>
<head>
    ...
</head>
<body> <!-- display: flex -->
    <div id="wrapper"> <!-- flex: 1 -->
        ...
    </div>
    <footer id="footer"> <!-- no extra rules required -->
        ...
    </footer>
</body>
</html>

Fiddle: https://jsfiddle.net/cxzpdkh2/

Answer №4

Consider setting the position of the body to relative

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

What is the best way to ensure that CSS links resolve properly when incorporating a PathInfo value?

Having an issue with my asp.net 3.5 app. Whenever I try to add a value to the URL for Request.PathInfo, it seems like I lose all connections in the head section because the paths are resolved as relative. This is how the master page appears: <head id= ...

asp.netcssurlpathinfo

Most efficient method for dynamically changing HTML content with JavaScript

Can anyone provide guidance on how to switch HTML content using JavaScript? For example: if($sid == 0) {insert one HTML code} else {insert another HTML code} Which method is preferable - LESS, jQuery, CSS3, etc? ...

javascriptjqueryhtmlcss

Angular 10 Reactive Form - Controlling character limit in user input field

I'm currently developing an Angular 10 reactive form and I am looking for a way to restrict the maximum number of characters that a user can input into a specific field. Using the maxLength Validator doesn't prevent users from entering more chara ...

htmlangulartypescriptangular-forms

Leverage the power of HTML5 localstorage in order to maintain the toggle state of jQuery even

After discovering the HTML5 "localstorage" function, I decided to try implementing it in combination with jQuery toggle to keep a div in its most recent state even when the page is refreshed. It seems like a more modern alternative to using cookies. Howeve ...

jqueryhtmllocal-storage

Is there a way to include a textarea or text input in a table row and have it expand upon clicking or dragging, without increasing the row height?

I am looking for a way to allow a textarea to expand or grow when clicked or dragged, without affecting the height of the table row it is in. You can see an example of the issue on this CodePen: https://codepen.io/kerastensorflow/pen/PobaRvK?editors=1010 ...

htmlcssreactjs

Live visualization from a Remote System (External Network)

I am looking to visually represent real-time sensor data (streaming data) using Node.js, HTML, and MySQL. I have set up MySQL to store the real-time sensor data, an index.html file that implements Google Chart through the doPoll app.js file, and the app.js ...

htmlmysqlnode.js-stream

Submitting a form using jQuery and processing the response

Can a form be submitted using jQuery without utilizing json, ajax, or other methods for handling the result? For example: <form id="loginform"> //some input fields and a submit button. </form> And then with jQuery: $("#loginform").sub ...

javascriptphpjqueryhtmlforms

Retrieve information from buttons generated within a while loop

My script uses a while loop to iterate through the drivers table and populate buttons with their names. function displayDriversMenu() { global $conn; $query = mysqli_query($conn, "SELECT * FROM drivers"); ...

phphtmlmysql

What is the best way to toggle the active class on a ul list?

After clicking, the active class remains on the original "li" instead of changing as it should. I've tried modifying the code but haven't been able to find a solution. Can someone please review what I might have missed? It seems like there's ...

javascriptjqueryhtmlcss

Display an image on an HTML page based on the TypeScript data in an Ionic Angular application

After retrieving user profile data from the database and storing it in an observable, I am able to access properties such as profileData.username, profileData.msgnumber, and more. When profileData.avatar returns the name of the avatar the user is using, I ...

htmlangulartypescriptionic-framework

Struggling to achieve full height expansion for an element?

After observing a peculiar issue on Firefox, Chrome, and IE while using Win XP, I need assistance with CSS for three vertically aligned block elements within a container. My goal is to set a minimum height of 600 pixels for the container and ensure that th ...

htmlcss

Deactivated dropdown menu options with the help of Twitter's bootstrap framework

Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...

csstwitter-bootstrap

What is the correct way to reset the styling of a web browser element, such as a <button>?

I have come across many sources advising me to reset HTML by manually resetting numerous individual properties, as demonstrated here: https://css-tricks.com/overriding-default-button-styles/ Another approach I discovered in CSS is simply using: button: {a ...

javascripthtmlcss

Bootstrap's pill-tab feature isn't functioning properly

Why is this tab not functioning properly? Do I need to make changes to the jQuery section? The Id and Href appear to be correct, but the tab is not working as expected. $('#v-pills-tab a').on('click', function (e) { e.pr ...

javascriptjqueryhtmltwitter-bootstrap-4-beta

After saving a rich field in Microsoft Sharepoint, I noticed that a new "External Class" was automatically added to my CSS

Although I am new to Sharepoint, I have experience in HTML and CSS. I recently created a mini HTML application that changes the pictures of hyperlinks on hover. It works perfectly when run on a normal browser outside of Sharepoint. However, the issue aris ...

htmlcssclasssharepointexternal

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

htmlcss

Initiate a click on a radio button while also retaining the selected option when the page is

This is a unique question. In my scenario, there are two radio buttons: "radio1" and "radio2." I have successfully implemented the following actions individually: Automatically triggering a click on "radio1" upon page load. This ensures that the button ...

javascriptphpjqueryhtmlradio-button

What is the best way to ensure that a PDF document automatically opens when a webpage is visited?

I am fairly new to this, so please be patient with me. What I am attempting to achieve is the automatic opening of a PDF document as soon as a webpage is loaded. Both the webpage and the PDF document(s) will be stored locally. We are working with an exter ...

androidioslocalhosthtml

Utilize CSS for Sticky Headers to Create Full Page Scrollbars for Table Control

Here is a code sandbox showcasing the use of Material UI's Table within a Paper component with a sticky header: https://codesandbox.io/s/2n40y I am looking to have the scrollbars appear at the edges of the browser page, bottom and right, while still ...

csshtml-tablematerial-uisticky

What is the best way to integrate inline radio controls in React-Bootstrap?

Currently, I am working on my personal project using Electron, React-Bootstrap, and Typescript. However, I am facing an issue with placing two radio controls next to each other. Despite following the examples from React-Bootstrap, I have not been success ...

cssreactjsbootstrap-4electronreact-bootstrap