The vanishing footer issue arising while adding the back to top button

When attempting to place the "back to top" button on the right-hand side just above the footer, the footer disappears. I am striving to position the button just above the footer while ensuring it aligns correctly. Prior to adding the "back to top" button, there were alignment issues where it did not cover the left side of the page at the bottom.

I have explored solutions involving JavaScript/jQuery, but I am seeking to accomplish this using only HTML and CSS.

Edit: After removing unnecessary elements except for the table which seems to be causing the issue due to scaling problems on smaller screens. Additionally, there was an oversight in mentioning that it also affects the navbar, leaving space in the top-right corner, hence why that element remains.


<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="test.css" type="text/css" rel="stylesheet">

<a name="top"></a>
<div class="nav">
  <input type="checkbox" id="nav-check">
  <div class="nav-header">
    <div class="nav-title">
      <a href="index.html" class="active">Link1</a>
    </div>
  </div>
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>

  <div class="nav-links">
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <a href="#">Link4</a>
  </div>
</div>

<h1>Comments</h1>

<table id="table">
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
</table>
</td>
</tr>
<div class="btopbutton">
<a href="#top">Back to top</a>
<div>
<div class="footer">
<p><span>Website | Website | Copyright 2019</span></p>
<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a>
</div>

</div>

</body></html>

@charset "UTF-8";

/*set background for whole page*/
html {
background-color: #26734d;
scroll-behavior: smooth;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

...

Answer №1

If you're looking for a way to structure your code, consider the following:

.nav {
 /* height: 50px;*/
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

By setting the parent element with 'position: relative', any absolute positioned children will be placed within that context. When it comes to the .footer, ensure you have a relative parent in place and specify positioning properties such as bottom and right for proper alignment. Create a div with the class name .wrapper to act as the relative parent and then position your footer within that wrapper. The same approach should be taken for the button with a fixed position.

Answer №2

Whether you're coming from the left or the right, follow these styles to hide the footer.

Custom CSS:

.btopbutton {
  right: 0; /*for right side*/
  z-index: 999;
}

If you prefer it on the left side:

Custom CSS:

.btopbutton {
  left: 0; /*for left side*/
  z-index: 999;
}

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

On iPhones, the links display as oversized blank containers

Recently, a client who switched from an Android phone to an iPhone reached out to me with a complaint. She mentioned that the links on her website, which I built for her, appear as large empty boxes. You can view her website here. To illustrate the issue ...

Disrupting Alignment Due to Input Tag

Hey there, I'm having an issue with my header design. I have a horizontal list of links in my header, and next to them, I wanted to add a search bar. Unfortunately, when I added the search bar next to the links, they all ended up appearing behind my b ...

Angucomplete-alt fails to display dropdown menu

On my website, there is a textarea where users need to input the name of a group project. The goal is to implement autocomplete functionality, so as users type in the project name, a dropdown menu will appear with suggestions of existing projects to assist ...

Encountered a Socket.io issue: CONNECTION_TIMED_OUT_ERROR

I'm in the process of developing a simple HTML chat program. I've set up a node server for testing, but encountering a socket error when trying to access the HTML page. This is my first experience with Node.js and setting up a server, so it' ...

What is the process for printing the CSS stylesheet for PPI::HTML highlight?

PPI::HTML has done an impressive job of formatting the HTML highlighting for my Perl code, similar to the example on CPAN. However, I am facing challenges in making the output usable without the appropriate CSS styles. Unfortunately, I am unsure of how to ...

The event listener function is not functioning properly on images generated by JavaScript

I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the do ...

Should each navigation item be enclosed within its own div element?

Currently, I am studying HTML + CSS and developing a website that requires a vertical navigation bar on the left side with four interactive elements. I'm wondering if it is customary to enclose each of these four elements in a div, or if there is a mo ...

What is the best way to modify a variable in a nested element using ng-click in the parent element?

Review this code snippet: <section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false"> <div class="page-content sub-content active-section">{{activeSection}} < ...

Adding Borders to a Single Column in Bootstrap

Is it possible to add borders in the color 'info' to the last column in a table? I'm struggling with this. Can anyone provide assistance? Does Bootstrap have the capability to support this design element? This is what I have tried so far: ...

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

Tips for keeping a div visible while hovering over a link using only CSS

Apologies for any language errors in advance. I will do my best to explain my issue accurately: In my CSS, I have created a hidden div that is displayed none by default. When I hover over a link in the navigation bar, I change the display to block, creati ...

Is there a way to display images in Vuetify similar to the linked image below?

I am looking to measure my v-img like the one shown in the image below. https://i.stack.imgur.com/edMKr.jpg Does anyone know how I can achieve something similar to the image shown using vuetify's v-img. <div class="row"> <v ...

Guide to modifying CSS properties of an individual element by manipulating class names with JavaScript

I have been searching for an answer to my question without success. I have a unique challenge where I need to change the styles of an h1 element by adding a class based on which radio button is clicked. The issue I'm facing is that when I select a dif ...

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution. Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone plea ...

Using the concept of a while loop in PHP, you can easily retrieve the values of Radio Buttons on one page and

Is there a way to retrieve and store radio button values in a MySQL database using PHP looping concepts? $result = mysql_query($query) or die(mysql_error()); while ($row = mysql_fetch_row($result)) { ?> ...

Warning in React: "A controlled input component is being converted to uncontrolled."

In my React app, I've come across a warning concerning controlled and uncontrolled input elements. The warning message reads: client.js:1 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changi ...

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

How can I adjust the height of a mat-select in Angular7 to display all items properly? Here is my component file: import { Component, ViewEncapsulation } from "@angular/core"; import { FormControl } from "@angular/forms"; /** @title Select with multiple ...

What could be causing the issue: Unable to locate or read the file: ./styles-variables?

I'm currently following a tutorial on how to create responsive layouts with Bootstrap 4 and Angular 6. You can find the tutorial here. I've reached a point where I need to import styles-variables.scss in my styles file, but I keep encountering t ...

Modify the surrounding container of the chosen selector

I have a complex website with multiple containers. My objective is to apply a color to a container with the class "colorme" when another container, located far away from it, has the class "active". Here is how the code is structured: .tooltip:has(tool ...