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

geekboy 2017-07-16 21:49:22 UTC #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):
http://imgur.com/a/Hpa4f

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..

DaveC 2017-07-16 22:28:37 UTC #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.

geekboy 2017-07-16 23:20:52 UTC #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:

kevcomedia 2017-07-17 01:15:07 UTC #4

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

geekboy 2017-07-17 10:29:05 UTC #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?