How to make div to fill the entire FREE space on screen

#1

Hello again.

I’m still working on my tribute page. The actual code is there: https://codepen.io/geekboy/pen/jyKOKX?editors=1100

Now the problem:
Depends of the screen resolution, there is an empty space below the footer. I’d like header to resize dynamically, to fill this free space, but I have no idea how to do that.

To illustrate - this is what it should like (img #1) and how it looks in practice (img #2):

[Album] Imgur: The magic of the Internet

I’ve tried to put html { height: 100%; } in my CSS file and it works, but the page crashes on resolutions <600px.

I will be extremely grateful for any help or suggestions

P…

#2

I’m not sure if you’ve already fixed this. I can’t see what you’re seeing (probably can’t make my screen big enough).

You’re on the right track with using flexbox. Here’s a good article on sticky footers: https://css-tricks.com/couple-takes-sticky-footer/. Scroll down a bit to the flexbox section.

1 Like
#3

Already fixed, but thanks for response.
I just changed height in body section to min-height.

But now there are two other bugs:

  1. Why on mobile devices content in header and footer is so small? It looks like resized by percentage (?), so just changing font-size doesn’t work.
  2. Why the icons from Font Awesome overfloats the text next to them? Illustration:
#4

Try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
in "Stuff for <head>" in the HTML settings

1 Like
#5

Thanks, it works!
Sorry, but I don’t understand this solution - content in other sections were scaling properly, and the problems were only in the footer and header. Why not on the whole page?

#6