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
Senra
Senra•16mo ago
Can you give more context? maybe share what you have done in a codepen ?
Senra
Senra•16mo ago
Damn. Use a grid on the body... Never thought of that.
vince
vince•16mo ago
I'm not going to be able to find it but Kevin did a video on it
Senra
Senra•16mo ago
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...
vince
vince•16mo ago
Ye! Looks like the one
thebigpal
thebigpal•16mo ago
html
html
thebigpal
thebigpal•16mo ago
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/*Header*/

header {
background-color: #101010;
padding: 1rem;
text-align: center;
}

.inner_header {
display: flex;
align-items: center;
justify-content: space-between;
}

.inner_header li {
display: inline-block;
padding: 0 .50rem;
color: #f1f1f1;
}

.inner_header li a {
color: #f1f1f1;
}

#a1 {
padding: 0 .25rem;
color: Gray;
}

/*Main*/

main {
flex: 1;
background-color: #333333;
text-align: justify;
padding: .5rem;
font-size: 1rem;
color: #f1f1f1;
}

/*Footer*/

footer {
background-color: #101010;
padding: 1rem;
color: #f1f1f1;
text-align: center;
font-size: .75rem;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/*Header*/

header {
background-color: #101010;
padding: 1rem;
text-align: center;
}

.inner_header {
display: flex;
align-items: center;
justify-content: space-between;
}

.inner_header li {
display: inline-block;
padding: 0 .50rem;
color: #f1f1f1;
}

.inner_header li a {
color: #f1f1f1;
}

#a1 {
padding: 0 .25rem;
color: Gray;
}

/*Main*/

main {
flex: 1;
background-color: #333333;
text-align: justify;
padding: .5rem;
font-size: 1rem;
color: #f1f1f1;
}

/*Footer*/

footer {
background-color: #101010;
padding: 1rem;
color: #f1f1f1;
text-align: center;
font-size: .75rem;
}
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
Senra
Senra•16mo ago
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.
/*Header*/

header {
background-color: #101010;
padding: 1rem;
text-align: center;
}

.inner_header {
display: flex;
align-items: center;
justify-content: space-between;
}

.inner_header li {
display: inline-block;
padding: 0 .50rem;
color: #f1f1f1;
}

.inner_header li a {
color: #f1f1f1;
}

#a1 {
padding: 0 .25rem;
color: Gray;
}

/*Main*/

main {
background-color: #333333;
text-align: justify;
padding: .5rem;
font-size: 1rem;
color: #f1f1f1;
}

html, body {
height: 100%;
}

body {
display: grid;
grid-template-rows: auto 1fr auto;
margin: 0;
}

/*Footer*/

footer {
background-color: #101010;
padding: 1rem;
color: #f1f1f1;
text-align: center;
font-size: .75rem;
}
/*Header*/

header {
background-color: #101010;
padding: 1rem;
text-align: center;
}

.inner_header {
display: flex;
align-items: center;
justify-content: space-between;
}

.inner_header li {
display: inline-block;
padding: 0 .50rem;
color: #f1f1f1;
}

.inner_header li a {
color: #f1f1f1;
}

#a1 {
padding: 0 .25rem;
color: Gray;
}

/*Main*/

main {
background-color: #333333;
text-align: justify;
padding: .5rem;
font-size: 1rem;
color: #f1f1f1;
}

html, body {
height: 100%;
}

body {
display: grid;
grid-template-rows: auto 1fr auto;
margin: 0;
}

/*Footer*/

footer {
background-color: #101010;
padding: 1rem;
color: #f1f1f1;
text-align: center;
font-size: .75rem;
}
Try replacing your css with this. See what happens
thebigpal
thebigpal•16mo ago
well, 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
thebigpal
thebigpal•16mo ago
thebigpal
thebigpal•16mo ago
thebigpal
thebigpal•16mo ago
now there's this
Senra
Senra•16mo ago
This is called overflow
thebigpal
thebigpal•16mo ago
okay. how do I fix it? oh nvm it works now thanks what's your paypal @senrastalker
Senra
Senra•16mo ago
For real? 😂
thebigpal
thebigpal•16mo ago
fr bro I have like 1 dollar left
Senra
Senra•16mo ago
Nah it's all right
thebigpal
thebigpal•16mo ago
aigh then
Senra
Senra•16mo ago
Also remove the div container. Or simply just copy paste the HTML and CSS from this codepen. https://codepen.io/senra/pen/wvQERrd
thebigpal
thebigpal•16mo ago
thanks
Want results from more Discord servers?
Add your server