+ 2
Footer alignment
im struggling to align the footer of my page to the bottom. i have body padding so the contents and texts of the page have some space around them. however, i do not want that to affect my footer. i want my footer to span the whole width from left edge of the screen to right edge of the screen(without any space between the footer and the edges). im currently using absolute positioning, but ai said, and i know, is that absolute takes the footer out of the document flow. so the content of the webpage could overlap with the footer. Is there a better way to do this without absolute positioning, and without using flexbox? code: https://sololearn.com/compiler-playground/Wf7KEV2QZLWD/?ref=app
35 Antworten
+ 5
What if you put the main content into <main> and apply the padding to <main> instead of <body>?
Like
body {
margin: 0;
}
main {
padding: 10px 20px;
}
Then you wouldn't need the absolute positioning anymore, and you can still consider if you want to apply flexbox layout?
+ 3
Ace
setting the body margin to 0 fixes the 'wiggle' you get when you accidentally drag the page on touch devices like phones or pads.
here is how i would use flexbox on main to get extra control on the layout and vertical spacing of the elements in it.
https://sololearn.com/compiler-playground/WTMlp917YnK2/?ref=app
+ 3
Ace
As Lisa and Bob_Li said, you could wrap the main content of the page in <main>.
Then you can use flexbox, use flex: 1 on main to make sure the main content takes the whole space and pushes the footer to the bottom.
Check:
https://sololearn.com/compiler-playground/W4G8i6CmTI9b/?ref=app
+ 2
Ace
you can add a padding-bottom to your main to create a gap between the main contents and footer.
it would compress the contents, but still try to keep the entire page visible without the need for scrolling.
I updated my code so you could see what i mean...
https://sololearn.com/compiler-playground/WTMlp917YnK2/?ref=app
+ 2
Lisa footer appears but is bugged out(doesn't appear when screen is smaller, as well as the fact that scrolling is disabled despite overflow-y set to scroll and auto, even with more content added for the page to be bigger)
+ 2
Lisa
body{
position: fixed;
top: 0;
left: 0;
...
}
fixed the stretching.
but if only applied to body, the footer cannot be scrolled into view when using the browser.
i also had to apply position fixed to the footer.
footer{
position:fixed;
bottom:0;
left: 0;
...
}
i don't remember things being this complicated. is Sololearn's webview outdated or did something change in browsers' css implementations?
or maybe css is just hard...
+ 1
absolute positioning is the least flexible way of organising your html.
but why no flexbox? it's like the css equivalent of sliced bread...
+ 1
Lisa thanks. I'm just considering some good methods so I may apply each based on my page layout and the things I want, and do not want, to be centered. how to do it with flexbox?
also, why are we applying margin on body? shouldn't padding be used on body instead, since the content is **inside** body, not outside?
+ 1
Ace
I removed the position:fixed;
try it again.
+ 1
Bob_Li if my page content is too short to reach till the near-end of the page/screen below(and I do not want to increase the height of main to 95%, I want to keep it at something like 60-80%, i do not want the main to make the content fill the screen, i want to keep it like that, keep the empty area below it and footer) while still making sure the footer stays at the bottom, what to do? with height around that values, or basically anything below 90, the footer doesn't get pushed to the bottom of the screen/page, making it have empty area below it. change the height of main to 90% or below to see what I mean
+ 1
Lisa it kind of does, but strangely enough, his code, when ran in sololearn and my ide, works fine. but when opened in browser, I see no footer at all. it is like it does not exist. i tried adding meta tags like:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but even that does not work. i tried adjusting zoom on the website, changing screen orientation and enabling desktop site, but none of it works.
+ 1
Ace
i copy pasted my code to Acode and opened it in a browser. yes, the footer isn't being displayed.
fix:
change body height from 100vh to 100%
browsers seem to interpret 100vh differently...
I edited my code accordingly.
+ 1
Bob_Li yeah that makes the footer appear, but im not sure if it is appearing where it should. because with your code, a problem happening is that I cannot scroll down(even when there is more content added and all of it doesn't fit in default frame).
but i think I could use Afnan's code if these issues persist and aren't fixed
+ 1
I applied the flexbox to the body and set more flexbox attributes. I tested in another Android app. Is it still doing the same?
https://sololearn.com/compiler-playground/W6E1kGu0IG77/?ref=app
+ 1
Ace
I edited my code's css and it seems to be working on browers the same way as in the Sololearn app.
there's a slight stretching when you swipe up or down, though. not sure how to fix that.
https://sololearn.com/compiler-playground/WTMlp917YnK2/?ref=app
+ 1
Bob_Li thanks. iam not sure what u mean by up and down stretch when swiping though, it looks fine to me
+ 1
Ace
when you open it in a phone browser or in Sololearn app and you slowly drag your finger up and down, the text seems to slightly shift(stretch?) up or down, even though the page is stationary. it's a weird effect.
+ 1
could you try position: fixed; on <html> and <body> (both!)
+ 1
my feeling is that it is something about webview...
only applying to html didn't help?
+ 1
another idea: could it be that it is not a problem of sizes and positioning but some feedback effect?
like user-select and that stuff?
Häufig solche Fragen?
Effizienter lernen, kostenlos:
Heute heiß
Fix the following code
2 Votes
Mobile number and similarity
0 Votes
Ai or cyber security
2 Votes
Regarding Basics :-
2 Votes
Alguém Português por aqui?
0 Votes
Improvement
0 Votes