The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> KFD: Keeping the Footer Down
Brian Chandler
post Jun 3 2021, 01:18 PM
Post #1


Jocular coder
********

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



Continuation of what I posted in the html forum, but it's really css.

I tried the css-tricks ideas: I don't want to have a fixed-height footer, because such things are Bad, but I want to avoid a really short page from having the footer floating in the middle, with a blank space underneath. So I put a div around the 'content' (everything above the footer), and set its min-height to 70vh. This works; the footer never rises above the bottom 30% of the screen, which is just fine. If the footer ends up being say 20% of the screen, then I need to make sure the background image extends far enough. So I add 30vh to the bottom margin of the stuff inside footer. Again this works; there is plenty of spare background. But then I do not want the page to scroll up beyond the actual end of the content, so I put a negative margin on the footer (margin: 1em 0 -30vh); this is supposed to pull the bottom of div:footer up, so the end of body is 30vh above the end of the background (except when the page is shorter than the screen). This doesn't work.

On rereading css-tricks I see that I may have invented that one myself. So I want to know how (if?) to make the scrollable document (possibly) shorter than the included background. Grateful for any ideas. (I have a workaround: just make the min-height of footer be 30vh)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 4 2021, 08:10 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,881
Joined: 10-August 06
Member No.: 7



Could you post a code example showing this?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 4 2021, 08:14 PM
Post #3


.
********

Group: WDG Moderators
Posts: 8,881
Joined: 10-August 06
Member No.: 7



Here's another idea, but I've only tested it briefly:

CODE
body {
margin: 0;
display: table;
min-height: 100vh;
}

#main, #footer {display: table-row;}

#main div {
display: table-cell;
vertical-align: top;
width: 100%;
background: pink;
}

#footer div {
display: table-cell;
width: 100%;
vertical-align: bottom;
background: lime;
}

<body>

<div id="main">
    <div>Main content</div>
</div>

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

</body>

Actually an HTML table requires about the same amount of code.


This post has been edited by Christian J: Jun 5 2021, 01:02 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jun 6 2021, 11:13 AM
Post #4


Jocular coder
********

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



Thanks, Christian. Unfortunately this gets me nowhere in my quest to actually understand something, in this case "negative margins". I found a blog post by "PPK" here: https://www.quirksmode.org/blog/archives/20...ive_margin.html in which he claims that there is no proper treatment of negative margins anywhere. He must mean that he hasn't found one, and he plainly knows more about css than I do, so I conclude I have zero chance of finding one. This after twenty years. Unbelievable.

[quote name='Christian J' date='Jun 5 2021, 10:14 AM' post='141906']
Here's another idea, but I've only tested it briefly:

Hmm, I spot a crypto table. This is extremely helpful, because it says that using tables for layout (when there is no other easy way) is not only going to be more robust than css, it will be supported until css finally dies. So I am not going to waste any more time on this particular problem -- it is marginal anyway, because only a page which needs to be hidden (i.e. has no puzzles on it) will normally be too short.

Sorry! I forgot to put a link to a specimen page: https://imaginatorium.com/furusato.htm ... this shows the negative margin not pulling the bottom of the body up to nestle against the place it should, if reason were applicable.

Meanwhile, a slightly more serious problem in https://imaginatorium.com/kyoto.html
The map floated left makes the centring wrong. Compare the Tokyo page where there is enough text to have the map floated left of it. The css spec says something like "text flows around the float", which is true as long as "text" is restricted to "ordinary flowing text". Anything else you're on your own. I have not found a way to make a bulleted list (ul) go around a float properly either; perhaps I will make a proper demonstration...

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 6 2021, 02:24 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,881
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Jun 6 2021, 06:13 PM) *

Thanks, Christian. Unfortunately this gets me nowhere in my quest to actually understand something, in this case "negative margins".

I didn't understand your question about backgrounds, that's why I asked for a code example. Can't contribute much to negative margin theory, alas.

QUOTE
I found a blog post by "PPK" here: https://www.quirksmode.org/blog/archives/20...ive_margin.html in which he claims that there is no proper treatment of negative margins anywhere. He must mean that he hasn't found one, and he plainly knows more about css than I do, so I conclude I have zero chance of finding one. This after twenty years. Unbelievable.

https://www.smashingmagazine.com/2009/07/th...gative-margins/ seems to write about it too, with more links at the end (I didn't read all of it).

The W3C specs are more obscure than ever though, and HTML5 is a nightmare.

QUOTE
Sorry! I forgot to put a link to a specimen page: https://imaginatorium.com/furusato.htm ... this shows the negative margin not pulling the bottom of the body up to nestle against the place it should, if reason were applicable.

404...

QUOTE
Meanwhile, a slightly more serious problem in https://imaginatorium.com/kyoto.html
The map floated left makes the centring wrong.

Not sure what's the best fix here. Using "position: relative; left: -52px" on the H1 and P elements seems to work, at least at first glance.

QUOTE
Compare the Tokyo page where there is enough text to have the map floated left of it.

On that page the heading text appears before the floated map image in the HTML. Why not do the same on the Kyoto page?

BTW the Kyoto puzzles look stunning, but the more screen resolutions increase (I'm currently on 2560x1440), the smaller the images will appear.



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: 27th September 2021 - 09:55 PM