The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Keeping footer at the bottom, of the viewport, I mean
Brian Chandler
post Jun 1 2021, 05:21 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



This page is abnormally short: https://imaginatorium.com/furusato.html
In other words the problem will not usually happen, because any page with no puzzles on will get hidden, but here the footer (on my typical desktop) is floating above the bottom of the screen. How would I make the main part of the page expand with empty space so the footer at least touches the botto. (Note that I do not want the footer fixed to the viewprt.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 1 2021, 06:23 AM
Post #2


.
********

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



That's called a "sticky footer", here are some ideas: https://css-tricks.com/couple-takes-sticky-footer/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jun 2 2021, 02:26 AM
Post #3


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(Christian J @ Jun 1 2021, 08:23 PM) *

That's called a "sticky footer", here are some ideas: https://css-tricks.com/couple-takes-sticky-footer/


Thanks Christian. I am trying to catch up on all the extra bits since I last designed a webpage, around 15 years ago, so it is very useful for ideas, even if I never implement this particular one. (I have around 200 pages I am manually converting, but I could add the extra div --EOD: Early Onset Divitis-- in the header and footer functions.

The fixed height is (as he says) a problem, but I could put a min-height on the body in vh percentage, and add some extra background to the footer like this:

bodytext min-height: 70vh - means the top of the footer will never move above 30% from the bottom of the viewport

footercontent bottom-margin: 30vh
footerbox bottom-margin: -30vh
- with luck means there is an extra 30vh of background to show below the content of the footer, in case it's needed

Perhaps I'd better try this, now I have come this far.

The flexbox (?) stuff looks promising. I typically want to show a bunch of puzzle items in boxes, typically around 1/4 screen width. Is this the way to make them flow, so on a narrow screen there are one or two at screen width? And for things like navigation buttons (rather than simple text links), where I want them centred, perhaps four or five in a row, but again to flow on a narrower screen.

Perhaps I'll make a separate post about units...
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: 10th April 2024 - 01:22 AM