CODEWITHSUNDEEP
htmlcss
Richard de Ree
Richard de Ree

Reputation: 2540

HTML Footer at bottom screen, but not sticky

I want a footer at the bottom of a SCREEN, no matter the size. I've found many many solution for this, but those footers are sticky footers. What I'm looking for is a footer what positions at the bottom of the screen, however when the user scrolls down, the footer should scoll too.

In this the down-arrow is on the bottom of the screen, no matter the screen size. When a user scroll, the arrow scrolls too. This is what I'm looking for.

Upvotes: 2

Views: 1108

Answers (3)

Kamran
Kamran

Reputation: 111

Try this it will work properly

https://jsfiddle.net/jd0Lyewt/enter code here

Upvotes: 0

phts
phts

Reputation: 3925

Try to use vh (viewport height) units in a parent wrapper element:

HTML:

<section>
    text1
    <footer>footer text</footer>
</section>
<section>
    text2
</section>

CSS:

section {
    height: 100vh;
}
footer {
    bottom: 0;
    position: absolute;
    background-color: yellow;
}

http://jsfiddle.net/tzeowruj/

Upvotes: 2

noa-dev
noa-dev

Reputation: 3641

The example you provided us is using a dynamic height on their container element so that the container remains the screenheight no matter what.

This can be acomplished with the following code : https://jsfiddle.net/6jvs0kv3/

Basically what i am doing is calling a javascript function that gets the screen height and makes the main container that height MINUS the footer height, so that the footer stays visible at that case but NOT attached to the screen position like a position:fixed would do

EDIT example with content after the "footer" , in that case i wouldnt name the element footer but thats what you are looking for basically : https://jsfiddle.net/6jvs0kv3/1/

Upvotes: 2

Related Questions