Removing whitespace at bottom of a page when using a sticky image

css position
remove blank space from bottom of webpage
css position: sticky; bottom
remove white space below footer wordpress
remove white space above footer wordpress
bootstrap white space below footer
elementor white space at bottom
sticky image on scroll

I have the following layout where I am using position: sticky to place an image near the bottom right corner of the page (below 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>

You can remove it using negative margin equal to the height. That space is the space of the image since position:sticky will keep the element part of 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">

White Space after footer - HTML & CSS, How do I get rid of the white space at the bottom of my website? It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements. The easiest way to get rid of this problem is to change the default display value of the image from inline to block, i.e. apply the style display: block; on images, as shown below:

You can use this code

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" />

Create a sticky sidebar, Is there any way to get rid of that white space and still be able to accomplish the of these tests and find out how to remove all that empty crap at the bottom. View the page images disabled with CSS on – the entire reason to use image  The white space displayed below image elements in HTML is often cause for confusion, but there is a logical explanation: Images are inline elements, and inline elements have descenders. Learn how to get rid of the space and why the rules of typography are the cause for your image padding frustrations.

I realised that I just needed to use position: fixed with bottom and right also set:

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" />

Getting rid of left over white space from relative positioned elements , Relative Position and Whitespace at bottom below footer I am facing a peculiar issue with regards relative positioning of a center div and whitespace below 1000 !important; display: block; clear: both; margin: 0 auto; background:#900; I also tried sticky footer options but even that leaves same amount of white-space  If that is the case than a simple CSS sticky footer is the best solution. If a site or webpage has few pieces of content than it will look ugly because there is much white space between the content area and a footer. The solution of such a problem is sticking the footer area at the bottom of a page, no matter of screen size.

Relative Position and Whitespace at bottom below footer, I am trying to remove the space between the header and the Hero image on the I had a similar situation with the home page and used the following Custom CSS by eliminating the padding at the top and bottom, it did not remove the white  Extra white space at the bottom of the page I am running Microsoft Word 10 but have a problem with page formatting. both the document and printer are set to A4 but when I print the page I get unwanted extra white space of about 2cm at the bottom of the page.

Removing Space Below Header, Sticky elements are predominantly used for keeping something shown on can pass and hide under on a page — I went with a background-image . one at the top and one at the bottom with equal heights matching the heights or load/​remove things in groups and do other react/vue goodness stuff that  CSS position sticky has really good browser support, yet most developers aren’t using it. The reason for that is twofold: First, the long wait for good browser support: It took quite a long time

Creating sliding effects using sticky positioning, You want to remove the white space that is positioned below the header area and WoonderShop: -2.75rem; for top row value and -5rem; for bottom row. You can remove the white space before the footer for all pages with this custom Speed Up WordPress · Optimize images in WordPress · WordPress child themes​  White space at the end of the html document. This is what caught me, and wasted about 2 hours of my time tracking it down. After using a PHP include for my footer, I had a line of white space after my closing PHP tag. This extra line caused the page to render with a white space at the bottom of my page. Removing it solved my problem!

Comments
  • Can you point out which white space you're talking about ?
  • Do you want it to be floating in the bottom right no matter what? You could use fixed positioning instead maybe.