Getting rid of excess space at the bottom of a page while employing a sticky image

I am currently working on a layout where I have utilized the position: sticky property to position an image near the bottom right corner of the page, under a flex layout:

.footer-logo {position: sticky; bottom: 50px; z-index: 100; margin: 50px; padding: 25px; width: 100px; height: 100px; background-color: green; float: right;}
.flex-container {height: 400px; display: flex; flex-wrap: wrap; background-color: #f2f2f2; padding-top:20px; justify-content: center;}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100"></img>

Although the img is correctly positioned, there is unwanted whitespace below the flex-container that spans the full width of the page and matches the height of the img (including padding & margin).

I am seeking a solution to remove this whitespace while keeping the img in its correct position. How can this be achieved?

htmlcss

Answer №1

To eliminate the space, you can utilize a negative margin that is equivalent to the height of the element. This vacancy is created by the image when using position:sticky, as it keeps the element within the flow:

.footer-logo {
  position: sticky;
  bottom: 50px;
  z-index: 100;
  padding: 25px;
  width: 100px;
  height: 100px;
  background-color: green;
  float: right;
}

.flex-container {
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  background-color: #f2f2f2;
  padding-top: 20px;
  justify-content: center;
  margin-bottom: -150px;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100">

Answer №2

Feel free to incorporate this code snippet

body {
            margin: 0;
        }
        .footer-logo {
            position: sticky;
            z-index: 100;
            padding: 25px;
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }
        .flex-container {
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            background-color: #f2f2f2;
            padding-top: 20px;
            margin-bottom: -150px;
            justify-content: center;
        }
<div class="flex-container"></div>
    <img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />

Answer №3

After some experimenting, I came to the realization that simply adding position: fixed along with specifying the values for bottom and right did the trick:

body {
            margin: 0;
        }
        .footer-logo {
            position: fixed;
            bottom: 50px;
            right: 50px;
            z-index: 100;
            padding: 25px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .flex-container {
            height: 400px;
            display: flex;
            flex-wrap: wrap;
            background-color: #f2f2f2;
            padding-top: 20px;
            margin-bottom: -150px;
            justify-content: center;
        }
<div class="flex-container"></div>
        <img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />

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

Is there a way to ensure that the background position remains stable and does not shift or collapse?

Still getting the hang of all this, but I'm making progress by learning on the go and enrolling in courses. Sometimes I face small obstacles like the one I'm encountering now. Everything looks great when the browser is at 100%, but when I minimi ...

htmlcssheaderbackground-imagedivision

Maintain form activity post submission using jQuery's addClass and removeClass methods

There is a button on my website that, when clicked, reveals a form. The code I am using for this functionality is: $('#theform').addClass('hidden') $('#theform').removeClass('hidden'); <div id="theform" c ...

javascriptjqueryhtmlforms

Tips for enlarging an image element without causing the header to expand

I'm looking to enhance a logo image within a header element by expanding it on hover or creating a pulse effect. I thought of increasing the max-width and adding a transition for simplicity. However, my main concern is how to make only the img element ...

htmlcssbootstrap-4

Steps for activating a class on a different page by clicking a link on another page using HTML

Is it possible to have an anchor tag in demo1.html that directs to demo2.html when clicked? In demo2.html, I am using a data filter which needs to select that filter. Can this be achieved? Demo1.html <a href="careers.html">Bangalore </a> | &l ...

jqueryhtmlcss

Altering custom fields in WordPress based on a specified timeline

Just diving into the world of Wordpress and running into a slight dilemma. I have an image that needs its links changed at specific times throughout the day For example, this image on the website should redirect users to abc.com from 8AM to 12PM when clic ...

javascriptphphtmlwordpress

What could be the reason for my click event not being triggered?

Having trouble with opening a link in a new tab using jQuery <a class="tt-link" data-link="report.html?id=0">Open</a> I attempted to open it in a new tab by attaching a handler within my ready() function $('.tt-link').click(funct ...

javascriptjqueryhtml

Display issue with grid-template-column not appearing

My grid column isn't working in my Christmas matching game project. I'm trying to create additional card columns using grid template columns, but the other three columns are not displaying as intended. They should be positioned right next to "Tim ...

htmlcss

Unlock the power of polymer iron-ajax by seamlessly linking input element data to the iron-ajax's body attribute

Having some trouble binding data from an input element to the "body" attribute of iron-ajax. In the past, using core-ajax in Polymer 0.5, I could easily bind values like so: <core-ajax id="ajax" method="POST" contentTy ...

javascripthtmlajaxpolymer

Personalize a bootstrap theme specifically for the mobile interface

My current template, based on Bootstrap, displays a text along with a button and an image. Using a checkbox, you can choose whether the image appears to the right or left of the text. One issue I'm facing is that in the mobile view, the text and butt ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

There seems to be an issue with this webpage - localhost has failed to transmit any data

I am currently experiencing an issue where, upon clicking on the href links, the page takes a considerable amount of time to redirect. However, instead of successfully redirecting at the end, I receive an error message stating that the page is not working. ...

javascripthtmlnode.jsexpressejs

Tips for correctly aligning a button to the right of an svg image

I am struggling to align a logo and toggle button inline in the header of a sidebar. Despite trying various techniques from Bootstrap 5 documentation and Stack Overflow, such as text-right, text-end, and float-right, I have not been successful in achievin ...

htmlcsstwitter-bootstrapbootstrap-5

Saving the content of a div as a PDF

There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...

javascriptphpjquerypdfhtml

Sorting depth based on z-index in a three.js render depth algorithm

My current project involves rendering planes with textures and sprites, all of which have transparent PNG textures. However, I've noticed a problem with transparency when objects overlap. I attempted to capture a screenshot of the issue for reference ...

htmlthree.js

Exploring Navigation Options in Django

How can I properly set up the navigation on my website to allow users to easily go back to the homepage or navigate to other sections such as "contact" or "prices"? To illustrate, here is a quick example: Home -- Prices -- Contact When I am on the homep ...

pythonhtmldjangourl

Attempted to remove Child Div using Jquery, but it did not get removed as expected

Trying to remove child divs inside a parent div? There are several methods, such as: $(".ChildDiv").html(""); $('.ChildDiv > div').remove(); $(".ChildDiv").html(""); $("#ParentDiv").html(""); $(".ChildDiv div").remove(); $(".ChildDiv di ...

javascriptjqueryhtmlcssasp.net

What is the best way to give an element or container a variable width rather than a fixed width?

I have a query regarding positioning and variable width. I've applied the following CSS: *{ border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/ } By adding this to all elements, I can visualize their p ...

csshtmlwidthcss-position

The problem of SVG rendering order requires a solution that does not rely on javascript

I am new to experimenting with inline svg, and I wanted to share my code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350"> <defs> <style> .ring { transform-origin: 175px 175px; } ...

csssvg

Steps for setting a background image for a div

I am facing an issue with 3 horizontally aligned images and a background image. The problem is that when I set the background image for the aligned images, it flows over them instead of staying behind. I want the 3 aligned images to be on top of the backgr ...

htmlcss

Step-by-step guide on uploading a video with AngularJs

I am currently implementing the angular-moviemasher editor in my project. However, I am faced with the challenge of uploading videos from my SQL database to Moviemasher. <input type="button" nv-file-select uploader="uploader" value="c://test.mp4" /> ...

phphtmlangularjsangular-moviemashermoviemasher

Previous Button on jQuery/Javascript Slider Not Functioning

Having a small issue with my previous button, #prev, as it is not scrolling back to the previous image but instead to the next image. This is the script I am using: http://jquery.malsup.com/cycle/int2.html Additionally, when I try to set the width of the ...

javascriptjqueryhtmlcss