How to create a header, main & footer?
I've been trying to create a header, footer & main. I kinda came up with a okay result, but it's a little bit buggy and I think it's because I don't know how to make it the correct way.
Can someone please guide me step by step how to do it the correct way? Including zooming in and out and all that. I have $1 on PayPal, I'll pay. I just want to figure this out.
21 Replies
Can you give more context? maybe share what you have done in a codepen ?
Damn. Use a grid on the body... Never thought of that.
I'm not going to be able to find it but Kevin did a video on it
Guess it is this one.
https://youtu.be/yc2olxLgKLk?t=32
Kevin Powell
YouTube
Easy sticky footer - stop a footer from floating up a short page!
Having the footer of the page just floating around in the middle just looks... bad. So let's see how we can fix it with both flexbox and grid in this video! As an added bonus, both of them are really easy to do!
This CSS-Tricks articles has a few other ways, including different ways to do it with flexbox and grid in case you run into issues wit...
Ye! Looks like the one
bassicaly I created a div and put display to flex and flex direction to column, also giving it 100vh.
I then put flex: 1; to the main
Remove that. It does not work because the
html
size depends on the content. So If you have less content, it will not fill the page.
Try replacing your css with this. See what happenswell, it does fit the page but there's a bug. If I shrink it down too much the bottom sidebar will appear, and when scrolling to the right there is this white space
now there's this
This is called overflow
okay. how do I fix it?
oh nvm it works now
thanks
what's your paypal @senrastalker
For real? 😂
fr bro
I have like 1 dollar left
Nah it's all right
aigh then
Also remove the div container.
Or simply just copy paste the HTML and CSS from this codepen.
https://codepen.io/senra/pen/wvQERrd
thanks