The placement of my footer is off and not aligned with the bottom of the page

I am struggling to make my footer align with the bottom of the page rather than sticking to the bottom of the browser window and moving along with the scroll. How can I fix this issue?

The goal is to have the footer remain out of sight at the bottom of the page until the user scrolls to reach it. Can anyone provide guidance on how to achieve this?

Thank you in advance!

htmlcss

Answer №1

Using a fixed position for the footer may not be the best solution, as you might want it to only appear when scrolling down the page.

The correct approach is to use absolute positioning, but make sure to define the parent element with relative positioning and its proper dimensions. In your case, the main container has a height of 100%, which doesn't translate to an actual size. By inspecting the main element using browser dev tools, you'll notice that its height is 0.

Take a look at the CSS modifications I've made to ensure the footer stays at the bottom:

body {
  font-size: 62.5%;
  margin: 0;
}

#main {
  height: 100em;
  position: relative;
}

/* Link corrections */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

/* End Link Corrections */

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}
 
... (CSS code continues)

<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <div id="main">
    <div class="half">
      <div id="headHeader">
        <img id="logo" src="http://.net/disclogo.png" onclick="window.location.href = 'index.html';"/>
        <ul id="menu">
          ... (HTML code continues)
        </ul>
      </div>
      <div id="head">
         ... (more HTML code)
      </div>
    </div>
    <div class="bottomHalf">

    </div>
    <div class="footer">
      <p class="footerText">&copy; 2018 All rights reserved.</p>
      <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
      <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
    </div>
  </div>
  </body>
</html>

Answer №2

To achieve the desired effect, make sure to use position:fixed; instead of position:absolute; as shown below:

body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}
/* Styles for anchor tags */
.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}
/**********************************************/
.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: fixed;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

/*************************************************************/
.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;
}

#head {
  position: relative;
  left: 15em;
  top: 10em;
  max-width: 80%;
}
/******************************************************/
<!DOCTYPE html>
<html>
    <head>
        <title>draft</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>
    <div id="main">
      <div class="half">
        <div id="headHeader">
          <img id="logo" src="http://.net/disclogo.png" onClick="window.location.href = 'index.html';"/>
          <ul id="menu">
            <li class="menuItem"><a href="index.html" class="nav">Home</a></li>
            <li class="menuItem"><a href="discord.html" class="nav">Discord</a></li>
            <li class="menuItem"><a href="rules.html" class="nav">Rules</a></li>
            <li class="menuItem"><a href="" class="nav">Forum</a></li>
            <li class="menuItem"><a href="" class="nav">Mods</a></li>
            <li class="menuItem"><a href="" class="nav">Admin</a></li>
            <li class="menuItem"><a href="" class="nav">Apply</a></li>
            <li class="menuItem"><a href="" class="nav">Donate</a></li>
            <li class="menuItem"><a href="" class="nav">Complaint</a></li>
            <li class="menuItem"><a href="" class="nav">About</a></li>
            <li class="menuItem"><a href="" class="nav">Contact</a></li>
          </ul>
        </div>
        <div id="head">
          <span id="headText">Opening Title</span>
          <div id="btnRow">
            <button class="btnHead" onClick="window.location.href = 'discord.html';">JOIN DISCORD</button>
            <button class="btnHead">DOWNLOAD MODS</button>
          </div>
        </div>
      </div>
      <div class="bottomHalf">

      </div>
      <div class="footer">
        <p class="footerText">&copy; 2018 All rights reserved.</p>
        <p class="footerText" id="ag1"><a href="https://tos..net" class="aga" target="_blank">Terms of Service</a></p>
        <p class="footerText" id="ag2"><a href="https://tos..net/privacy/" class="aga" target="_blank">Privacy Policy</a></p>
      </div>
    </div>
    </body>
</html>

Answer №3

To achieve a fixed footer position, you can use the following CSS:

body {
  font-size: 62.5%;
}

#main {
  height: 100%;
}

/* Link styling */

.nav, .nav:visited {
  text-decoration: none;
  color: #f5f3f5;
}

.aga, .aga:visited {
  text-decoration: none;
  color: #000913;
}

.half {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 45em;
}

.bottomHalf {
  background-color: #69b4b2;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 45em;
  left: 0;
  height: 50em;
  z-index: -1;
  border-top: solid 0.5em #000913;
  border-bottom: solid 0.3em #000913;
}

.footer {
  background-color: #f5f3f5;
  position: fixed;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
}

.footer2 {
  background-color: #f5f3f5;
  position: absolute;
  margin: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 5em;
  display: flex;
  border-top: solid 0.3em #000913;
}

.footerText {
  font-family: "Rubik";
  color: #000913;
  font-size: 1.6em;
  vertical-align: middle;
  margin-left: 10em;
}

#ag1, #ag2 {
  position: absolute;
}

#ag1 {
  right: 41em;
}

#ag2 {
  right: 32em;
}

.half2 {
  background-color: #2ac15d;
  position: absolute;
  margin: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.1em;

}
  
/* Other styles continue... */

<!DOCTYPE html>
<html>
  <head>
    <title>draft</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>
  <div id="main">
    <!-- HTML code continues... -->
  </div>
  </body>
</html>

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

Altering the playback of a flash object using HTML or JavaScript

Can the playback speed of a flash object be adjusted without recompiling the object, like through HTML attributes or JavaScript? Appreciate any help in advance ...

javascripthtmlflashactionscript

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

function adjustHeight(){ var headerHeight=$(element).find('.header').outerHeight(); console.log(headerHeight); var temp=$(window).height()-headerHeight; console.log(temp); $('.users ...

javascriptjqueryhtmlcss

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

How can I display the selected value from a dropdown in a text box at the current cursor position? I am currently using the following code: enter code selectChangeHandler(event: any) { this.selectedID = event.target.value; // console.log("this.selecte ...

javascriptcssangulartypescript

What is the reason for Safari 13 not displaying the outline during focus when a transition is applied?

In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size). This issue does not occur in other browsers. Are there any workarounds or hacks to ensure the outline ...

csssafarifocuscss-transitionsoutline

Learn how to use AJAX to automatically retrieve the contents of a file

I'm currently exploring AJAX to retrieve the contents of a file upon clicking a button, as I am fairly new to AJAX. Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { ...

pythonhtmlajaxfile

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

htmlcss

Is it possible for JavaScript to access and read a local file from a web page hosted locally

I am interested in using html, css, and javascript to develop a user interface for configuring a simulation. This interface will be used to generate a visualization of the simulation and an output parameters file based on multiple input files. It is impor ...

javascriptfilelocalhtml

Like the Word outline view, the list view can be easily collapsed and expanded with a simple click

I've seen a few examples, but I haven't been able to achieve what I'm looking for. I need to extract text from a field and convert it into an outline view similar to the one in Word. Is this possible? Any help would be greatly appreciated. I ...

javascripthtmlcssjsonjelly

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

javascripthtmlcsswordpress

Updating Text within a Label with jQuery

Seeking assistance with a jQuery issue that I am struggling to resolve due to my limited experience. Despite attempting to search for solutions online, I have been unable to find an alternative function or determine if I am implementing the current one inc ...

javascripthtmljquerycssfunction

Can you explain the meaning and purpose of <meta charset="UTF-8"> tag in

Meta charset="UTF-8" serves as a condensed symbol system for representing information in a more concise and practical manner: The coded message was carefully crafted. ...

html

Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images? Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for borde ...

htmlcss

Guidelines on centering an AJAX spinning animation within a parent div

Below is the basic structure of an HTML document for a webpage. <div class="grand-parent"> <div class="header">Heading</div> <div class="parent-div"> <div class="child-div-1"></div> ...

javascriptjqueryhtmlcssajax

Exploring the beauty of background color curves in React Native

Struggling to figure out how to create a curved background color on the top (header part) of my design. Check it out https://i.sstatic.net/nNGPK.png I'm looking to achieve this curved design for my header part https://i.sstatic.net/K8wKV.png Here is ...

cssreactjsvisual-studioreact-native

Tips on arranging check-boxes horizontally in this code repository

We are working with an autogen form in PHP, and the way the checkboxes are currently displayed is demonstrated in the following code: case FIELD_CHECK_BOX: $fieldHtml = printCheckbox($mode, $field->getId().'[]', $field->get ...

phphtml

Positioning Div at the Bottom of a Interactive Flip Card Using Bootstrap 4

My current project features a creative flip image card created using bootstrap and js. On the back of the card, there is a title, a main text body, and a few small additional pieces of information. My goal is to have these three small bits of information a ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Featuring multiple elements with an ng-class that behaves similarly to a ternary operator: ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'" To access these elements, we can compile all the ones with fa-minus and store them in a lis ...

javascriptjquerycssangularjsjquery-selectors

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the si ...

javascriptjquerycss

The text is not meticulously arranged within the designated span

My text-align (center) property doesn't seem to be working correctly with the following code snippet: <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. </span></span> The CSS for the info class is as fo ...

htmlcss

Google Maps in Angular is not showing up

My Angular Google Maps implementation seems to be working, but unfortunately, the map is not showing on my website. I have confirmed that my JS is loading the maps and I can retrieve the map properties. Interestingly, when I check the Chrome AngularJS Debu ...

javascripthtmlangularjsgoogle-maps