Trying to make this sticky footer

Joveice · November 27, 2016

So I'm trying to create this sticky footer but nothing works, either it sticks to the bottom of the window and overlaps everything, or it sticks to the bottom of the window before the scroll and overlaps everything where the window used to be.

I just need it to stick to the bottom of the page, and if there is alot of content it should be at the bottom of it and not the screen. and when there is little it should stick to the bottom of the window so there are never any gaps under it.

How do you do this? everything I found on google makes it do any of those things I mentioned.

leonfagan71 · November 27, 2016

Just now, Joveice said:

So I'm trying to create this sticky footer but nothing works, either it sticks to the bottom of the window and overlaps everything, or it sticks to the bottom of the window before the scroll and overlaps everything where the window used to be.

I just need it to stick to the bottom of the page, and if there is alot of content it should be at the bottom of it and not the screen. and when there is little it should stick to the bottom of the window so there are never any gaps under it.

How do you do this? everything I found on google makes it do any of those things I mentioned.

Code examples would be nice, what are you doing it in?

HTML? Java?

leonfagan71 · November 27, 2016

for a simple sticky footer,

I'd use

<html>
  <head>
  	<style>
      #longlikemy{height:5000px;background:red;z-index:1000;}
      #yayfooter{
        height:100px;
        background:black;
        position:fixed;
        left:0px;
        right:0px;
        bottom:0px;
        width:100%;
        z-index:10000;
        color:white;
      }
    </style>
  </head>
  <body>
    
    <div id="longlikemy">lol</div>
    <div id="yayfooter">footer stuff yayz</div>
  </body>
</html>

Joveice · November 27, 2016

13 minutes ago, leonfagan71 said:

Code examples would be nice, what are you doing it in?

HTML? Java?

https://jsfiddle.net/modotq7h/

Here, that footer doesent stick to the bottom

Joveice · November 27, 2016

7 minutes ago, leonfagan71 said:

for a simple sticky footer,

I'd use


<html>
  <head>
  	<style>
      #longlikemy{height:5000px;background:red;z-index:1000;}
      #yayfooter{
        height:100px;
        background:black;
        position:fixed;
        left:0px;
        right:0px;
        bottom:0px;
        width:100%;
        z-index:10000;
        color:white;
      }
    </style>
  </head>
  <body>
    
    <div id="longlikemy">lol</div>
    <div id="yayfooter">footer stuff yayz</div>
  </body>
</html>

This is one of the things I don't want, I only want the footer to be seen when you are at the bottom of the page, don't want it to float with the window.

leonfagan71 · November 27, 2016

13 minutes ago, Joveice said:

This is one of the things I don't want, I only want the footer to be seen when you are at the bottom of the page, don't want it to float with the window.

I'm sorry, I don't quite understand what you mean here...

16 minutes ago, Joveice said:

I only want the footer to be seen when you are at the bottom of the page,

Well, on your template if there's more content then when you scroll, you'll see the footer...

Joveice · November 27, 2016

14 minutes ago, leonfagan71 said:

I'm sorry, I don't quite understand what you mean here...

Well, on your template if there's more content then when you scroll, you'll see the footer...

Yea but if there is less content the footer has a gap under it. which is what I'm trying to remove.

vorticalbox · November 27, 2016

32 minutes ago, Joveice said:

Yea but if there is less content the footer has a gap under it. which is what I'm trying to remove.

create a div with a min height of 100% v-height, this will mean it sits at the bottom when there is no content but moves down when there is more.

can't remember the exact code off the top of my head but I am pretty sure its v-height as I had this problem while back.

just climbed into bed so no testing for me tonight. If you dint have a working code in like 12 hours ill give it a go.

Joveice · November 28, 2016

9 hours ago, vorticalbox said:

create a div with a min height of 100% v-height, this will mean it sits at the bottom when there is no content but moves down when there is more.

can't remember the exact code off the top of my head but I am pretty sure its v-height as I had this problem while back.

just climbed into bed so no testing for me tonight. If you dint have a working code in like 12 hours ill give it a go.

I dident get this to work, and I found little to nothing about v-height so I don't know how to do it.

vorticalbox · November 28, 2016

1 hour ago, Joveice said:

I dident get this to work, and I found little to nothing about v-height so I don't know how to do it.

yeah, I was tired last night. It is height: 100vh; any who made you a jsfiddle. https://jsfiddle.net/vh1dpb01/

<div class="full-height">
  <div class=container>
    <div class="header">
      header
    </div>
    <div class="content">
      this is my very very cool website
    </div>
    <div class="footer">
      copy right vorticalbox
    </div>
   </div>
</div>

.full-height{
  height: 100vh;
  width: 100%;
  position: relative;
  border: black solid 1px;
  text-align: center;
}
.container{
  width:80%;
  margin: auto;
}
.header{
  height: 10vh;
  border: black solid 1px;
  }
 .content{
   position: absolute;
   height: 85vh;
   width:79.8%;
   border-left: black solid 1px;
   border-right: black solid 1px;
   margin: auto;
 }
.footer{
    position: absolute;
    /* 79.8% as absolute removes the 80% of the container and setting width to 80% wasn't inline I don't know why*/
    width:79.8%;
    height: 5vh;
    bottom: 0;
    border: black solid 1px;
}

leonfagan71 · November 28, 2016

12 minutes ago, vorticalbox said:

/* 79.8% as absolute removes the 80% of the container and setting width to 80% wasn't inline I don't know why*/

1px borders do this

if you make the background a different color instead of using a border to show the location then it should work.

vorticalbox · November 28, 2016

12 minutes ago, leonfagan71 said:

1px borders do this

if you make the background a different color instead of using a border to show the location then it should work.

didn't think of that

Joveice · November 28, 2016

4 hours ago, vorticalbox said:

yeah, I was tired last night. It is height: 100vh; any who made you a jsfiddle. https://jsfiddle.net/vh1dpb01/

Well this is better than what I have found so far, but again this does still stick to the window and not the bottom of the page, but I don't feel like working more on it, so I'm just gonna remove the color box and leave it like etc this forum where there is just a line that seperates it, thay way it doesent look ugly when there is no content. thanks alot tho.

vorticalbox · November 28, 2016

11 minutes ago, Joveice said:

Well this is better than what I have found so far, but again this does still stick to the window and not the bottom of the page, but I don't feel like working more on it, so I'm just gonna remove the color box and leave it like etc this forum where there is just a line that seperates it, thay way it doesent look ugly when there is no content. thanks alot tho.

change height to min-height that way the smallest the page will be is the size of the window but it can be larger.

Joveice · November 28, 2016

3 minutes ago, vorticalbox said:

change height to min-height that way the smallest the page will be is the size of the window but it can be larger.

what should I set it to?

vorticalbox · November 28, 2016

3 minutes ago, Joveice said:

what should I set it to?

min-height: 100vh; that will make the out divs smallest size as the widow size.

edit. makes text go under to footer here is it fixed.

.full-height{
  min-height: 100vh;
  width: 100%;
  position: relative;
  border: black solid 1px;
  text-align: center;
}
.container{
  width:80%;
  margin: auto;
  
}
.header{
  height: 10vh;
  border: black solid 1px;
  }
 .content{
   position: absolute;
   height: 85vh;
   width:79.8%;
   border-left: black solid 1px;
   border-right: black solid 1px;
   margin: auto;
   overflow: auto;
 }
.footer{
    position: absolute;
    /* 79.8% as absolute removes the 80% of the container and setting width to 80% wasn't inline I don't know why*/
    width:79.8%;
    height: 5vh;
    bottom: 0;
    border: black solid 1px;
}

Joveice · November 28, 2016

2 minutes ago, vorticalbox said:

min-height: 100vh; that will make the out divs smallest size as the widow size

Hm, footer just sticks to the top of the page now

vorticalbox · November 28, 2016

1 minute ago, Joveice said:

Hm, footer just sticks to the top of the page now

updated post but it makes the content div have a scroll bar I'm still working on it

Joveice · November 28, 2016

2 minutes ago, vorticalbox said:

updated post but it makes the content div have a scroll bar I'm still working on it

well it's nicer so far

vorticalbox · November 28, 2016

1 minute ago, Joveice said:

well it's nicer so far

I do try, internet is really not helpful just now

Joveice · November 28, 2016

1 minute ago, vorticalbox said:

I do try, internet is really not helpful just now

haha well no worries man

vorticalbox · November 28, 2016

50 minutes ago, Joveice said:

haha well no worries man

https://jsfiddle.net/vh1dpb01/3/

I think I have it let me know if you remove all the test the foot sticks at the bottom but with the text moves off the page.

Joveice · November 28, 2016

2 minutes ago, vorticalbox said:

https://jsfiddle.net/vh1dpb01/3/

I think I have it let me know if you remove all the test the foot sticks at the bottom but with the text moves off the page.

Perfect! exactly what I wanted

vorticalbox · November 28, 2016

3 hours ago, Joveice said:

Perfect! exactly what I wanted

I've solved this before was just a matter of remembering. I really should save this code somewhere. Glad we got it solved.

Sign In

Trying to make this sticky footer

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites