How do I make the footer big enough to cover the body on the left, right and bottom?

Question

Hey, I am working on a Sudoku Soluter (the Script already works 😎) and I try to improve the Style.
Right now I need to know, how I can make the footer (blue Thing in the bottom) Cover the whole bottom. I want to See the Body Background left, right and under it, as it is now.

i'm also Happy to hear Amy other advise you want to give me. (I Just started learning Web Design)

Thank you.😊

Edit: currently fixed it with "position:absolute".

https://code.sololearn.com/W30KAtd5P3Yq/?ref=app

Answer 1

try this.

footer {
position: absolute;
bottom: 10px;
}

hope it help

Answer 2

my phone not supported 'let' so i must change it to 'var' in 'for' loop

Answer 3

try input.type = "text"; // line 7

Answer 4

One Problem about the Position:absolute with bottom:0px is that the Footer appears above the Keyboard when you enter the Numbers on a Touch UI device. Can I disable this?

Answer 5

@JFS Animinion
Hey Thanks for your answer. That worked like I wanted it to. There ist only one Problem. as far as I Know, objects With position:absolute are taken Out of the flow, which means that if the Display ist to Small other objects could disappear under it, for example the Buttons. Right?

And about the let: I didn't Know, some browsers don't Support it. I'll probably Change it. Thank you :)

Answer 6

why?
this doesn't fix anything but makes a Bug possible.
the Input fields are only supposed to Contain Numbers.
or do i Miss the Point?