Footer on bootom

[Bounty_y2k]

Bad footer,go down! Always problems with it..
I have set my body,html and main_b (main container) css to min-height:100% but the footer wont go down on small pages eg. login page..
Can anyone help me train my footer to go down?

[Gwenwyfar]

I'm not sure min-height does what you think it does. For the most part, min-height in percentages won't work, unless in specific situations.

I think, if you want short pages to have a min height and not be too short, adding min-height: 80vh would work better.

For the footer part... I take it your pages are simply too short? An alternative if you mean you want the footer to stay always in the bottom of the page no matter the size of the content you should add this to the footer, then a margin on main content:

position: absolute;
bottom: 10px;

[Antechinus]

Why bottom: 10px;? Zero would be just as good.

[Gwenwyfar]

Because then it would be glued to the bottom. As default it doesn't have internal padding, or at least mine didn't, I had to add it.

[Antechinus]

So add internal padding then

[Gwenwyfar]

What if he decided to add a border to his footer, or his has one? It would still be glued to the bottom

Margin would work, but its an extra rule for no real purpose, if you're already positioning it there anyways, just need 1 extra number to do the same thing.

[Antechinus]

Yebbut it leaves you with a 10px gap, which is a PITA if your footer has a different background to your body tag and other content. It had better have a different background too if you are going to use absolute, because it will overlap all other content, so you will want the definition of a background to keep it all legible.

[Gwenwyfar]

That's what the margin in the content is for, to leave space to the footer to not overlap anything.

But true, didn't think about the possibility of wanting to have it glued there with no space.

[Antechinus]

Ok, so now watch what happens when someone has to use a non-default font size in their browser, thereby changing the footer height over what you tested.

(grumpy old dev mode on )

[Gwenwyfar]

Still would depend on how he has his footer set up. It would only break if the footer was starting exactly where the content ends with no space in-between, which isn't how default smf theme is, or most themes I've seen since they're still all based off default.

Just leaving a little extra space would account for that. I'm sure no one is going to use a 20px font size as their default, and if they do, any site is going to break anyways.

Even then, you could use a margin in em, which would work for either case.

[Antechinus]

Actually I know a bloke, with perfect eyesight, who was running 22px default font due to his monitors and workstation layout. You'd probably be surprised at how common non-standard font sizes are, even before you get into a11y users. A11y users are another ballpark entirely, and need clean layouts too since it's hard enough for them to see anything. This is stuff people really should be aware of, although admittedly it's not beginner level coding.

[Gwenwyfar]

That's what em is for, and still makes it a viable solution.

Ahh. Didn't think anyone got to that point of needing a font that huge, even with reading problems. I admit, I know little about these problems and have never met anyone which had a font that large or with similar problems. But I do not make design for others, I only code it. For the design that I do make, it would be a waste of time to try to make the design for work for 20px font size when no one using said site is ever gonna need it as its a small community. I just make sure it works up to 14px-15px or so, for those that prefer or need larger font sizes, for the most part. Unless I'm just doing someone else's design, which are made thinking about that anyways. Mines would never fit such a large font size without changing a lot of how it is, as its somewhat the opposite of these simplistic designs most common these days. Would need a complete redesign on some of them to even think of fitting something so large. But its a good reminder, for when I have free time to spend on something like this, to make a switch of sorts to a design that does fit it on my personal site And I'm only a beginner in php, not in css. I guess you could call me a beginner or inexperienced in "mainstream designing", though, simplistic design and whatnot, as I dislike most of it and rarely follow anything in it, I don't consider myself a designer, either, I just code

And I might have suggested absolute positioning here, but doesn't mean I use it frequently or as basic design, when I do, its almost always relative + absolute combo, to make some button be in a corner of something and when float is not a good option or an option at all, and similar, but it was the best option for his case if the first solution wasn't what he wanted

[Bounty_y2k]

Woah,this went offtopic
Wow,I didn't know about vh and vw values at all. That works very well,thanks for letting me know about that. Are there other values except standard ones (px,mm,in,%,cm..) that I should know about? xD
Correct me if I'm wrong vh and vw stands for view height and width,right?