The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help making a sticky footer
wrybread
post May 28 2020, 12:17 PM
Post #1





Group: Members
Posts: 6
Joined: 28-May 20
Member No.: 27,367



I'm trying to make a webpage that simulates a mobile app, with a footer that remains in place at the bottom of the view even as the content goes beyond it. I'm having a surprising amount of trouble doing so.

Here's a stripped down version of my code:

https://codepen.io/wrybread/pen/OJyexmL

(In that example, if you scroll down you'll see my footer. If you change the height of the div with the inline style to something shorter than the view the footer will pin to the bottom).

This works until the content is larger than the screen, and then it pushes the footer down off the screen.

I don't imagine anyone has any tips?

Using a plugin would work for me too.

Thanks for any help.

This post has been edited by wrybread: May 28 2020, 12:37 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2020, 02:30 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



You mean you want the footer fixed at the bottom of the browser's viewport, even when the user scrolls? That can be done with CSS "position: fixed": https://davidwalsh.name/demo/css-fixed-position.php
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:07 AM