Need Footer Locked To Bottom

HTML & CSS
1

Our client is displaying the final site on a kiosk device that has a resolution of 1080 x 1920 pixels and has a portrait orientation. I’ve tried to build the site to match those dimensions exactly but for some reason, the div #footer is not locked to the bottom of the browser in the right way. When I view the site in a desktop browser and set the browser in responsive mode, the footer appears to be positioned correctly, but it falls apart when viewed in other resolutions that are larger.

Can someone help me determine where I have messed up?

http://www.securehostserver.info/brand/3d-printing/what-is-it/index.html

2

I don’t see any #footer in that page.

3

You need to click on one of the links, then you will see a footer.

What is the OS of that kiosk?

Do you know if it uses a real browser? If so which one.

Since it is not behaving like your browsers I suspect that it may not fully understand CSS.
It may require a different approach.

4

Take the footer div out of the wrapper div

#wrapper
{
    width: 100%;
    min-height: 100%;
    margin-bottom: -475px;
    position: relative;
}


#footer
{
   width: 100%;
   height: 475px;
   position: relative;
}

html

<div id="wrapper"></div>
<div id="footer"></div>

You could also use flexbox

5

Removing the #footer from within the #wrapper helped out. What is the best tutorial to learn how to use flexbox?

6

I’ve updated the link listed. Sorry about that!

7

I personally liked this article a lot

8

Take a look at Paul’s flexbox sticky footer.

There is also a link to the display table version in that demo.

Though it is not the same as a position fixed footer, it may work out better for you.
A fixed footer with a height of 475px is too tall anyway.

2 Likes
9

One advantage of sticky over fixed is that it accounts for the space it takes up in the document flow. So you don’t have to use “magic numbers” in a margin on the main content to clear it, which is a common flaw with fixed header/footers.

4 Likes
10

Hi there Todd_Temple,

this page of yours…

http://www.securehostserver.info/brand/

…which you had in your original post is not
responsive and relies upon “JavaScript” . :eek:

This attachment…

Todd_Temple.zip (7.1 KB)

…addresses those issues. :winky:

coothead

1 Like
11

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