Keeping footer at the bottom, of the viewport, I mean |
Keeping footer at the bottom, of the viewport, I mean |
Brian Chandler |
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.) |
Christian J |
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/
|
Brian Chandler |
Jun 2 2021, 02:26 AM
Post
#3
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
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... |
Lo-Fi Version | Time is now: 10th April 2024 - 01:22 AM |