I want the footer to be on the end of the scrollable page -> i want to only see it when ive fully scrolled down. Tried around a bit but only got it to stick on the end of the first part of the loaded page -> the position was the bottom of the screen without having scrolled.
jsfiddle
link
CodePudding user response:
Your inline css threw me off for a second, but this should work:
html {
padding: 0;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
#footer {
padding-top: 8px;
z-index: 13301;
width: 100%;
height: 50px;
text-align: center;
background-color: aqua;
font-weight: 400;
font-size: 32px;
color: rgb(255, 255, 255);
text-decoration: none;
}
And I removed the inline stuff on article. Try not to use inline CSS if not absolutely necessary.
Also your CSS is a bit chaotic.
There is many ways to make a footer stick to the bottom, my solutions uses flexbox.