My footer is a half page when window size changed.

[Edrol97]

Hi all,

My footer on a new page is showing as white after a certain width and only seems at minimum width to cover half the bottom half of the page. I've set overflow:hidden but can't see what else is up. Code attached as well as video.

footer {
  background-color: black;
  color: black;
  overflow: hidden;
}

.footergames a {
  font-family: Reith;
  color: white;
}

.footergames a:hover {
  background-image: url(img/background/Underline%20White.png);
}

.footergames {
  color: black;
  overflow: hidden;
}

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Johna]

Hey there,

That's because the page height doesn't cover the entire window, so that white space below the footer is basically nothing.

What you could do is set min-height: 100vh; to the body, so that the height of the page will always be at least the height of the window.

 

[tomliv]

Along with @Johna's suggestion, I usually add a wrapper around the whole page set to display:flex flex-direction:column and add margin-top: auto to the footer to push the footer to the bottom of the page. This avoids odd short pages.