White Space after footer

HTML & CSS
1

huge white space after footer on medium and small screen. Mobile screen size is fine. When I inspect it, it says its not even an element, the html tag surrounds all content to the bottom of my footer background colour. Not sure what this white space is or how to remove it!

http://marisabivi.github.io/galapagos-conservancy/

1 Like
2

It’s just due to the fact there’s not much content on the page. Your page ends before the bottom of the viewport so the html background is coming through (which is the white color you see).

2 Likes
3

Hi, @shelby. Welcome to the fourms!

You could implement @PaulOB’s sticky footer on your page very easily which would force the footer to the bottom of the viewport if the content is insufficient to fill the height.

(1) put a container around your entire page such as “outer”.

<body>
<div class="outer">
    <header>
...
   </footer>
</div> <!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <script src="js/index.js"></script>
</body>
</html>

(2) Then add the following to your CSS:

html,body {height:100%;}
body {margin:0;}
.outer {
    display:table;
    width:100%;
    height:100%;
}
header,main,footer {display:table-row;}
header,footer {height:1px;}

That should get rid of the white space beneath the footer.

1 Like
5

Were any of the preceeding replies to your question helpful?

6

yes, the first answer was correct. Im still in school learning to code and it didn’t even occur to me that there was so much white space because there was no content to push the footer closer to the bottom of the page. I appreciate your answer, but I am not looking for it to be static to the bottom of the page, just to the bottom of the content

7

OK, perhaps a little clarification is in order.

The “sticky footer” will flow below the bottom of the window with the content if sufficient content exists to push it down. Otherwise, it waits at the bottom of the window.

A “fixed footer” would be statically attached to the bottom of the window regardless of content.

At the moment, it sounds like your footer is simply a continution of the bottom of the page. No special treatment.

8

thank you, its working fine now

1 Like
9

I guess it depends on where you want the “space” to be in “short content” pages.

If you don’t mind, or want, it between the content and the footer, that works.

But if it is simply to have the same color what I often do is give html the same color as body

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.