How to keep website footer at bottom even when page expands downwards

Question

I'm having an issue with my site's footer. Whenever more content is added further down the page and a scrollbar is made available, the user scrolls and the footer is not at the bottom. The footer is in position absolute, and shows neatly at the bottom of the screen before the user scrolls down. This would be find if the user didn't have to scroll down, but obviously some pages are longer than others. All the code is shown below. Using fixed would obviously not do what I want. I want the user to scroll down to the bottom of a page to find the footer there, like with most websites.

HTML:

<div id="topbox">

<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">

<div id="box" class="boxa">
text1
</div>

<div id="box" class="boxb">
text2
</div>

</div>

<div style="position:absolute;top:10px;right:0px;">
<img> 
</div>

<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>

<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">

<div class="backgroundimage"></div>

<div id="footer"><p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p></div>

CSS:

#box {
position:relative;
}


.boxa {
left:173px;
bottom:34px;
width:249px;
}


.boxb {
left:430px;
bottom:55px;
width:90px;
}


#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:7.5px;
font-family:arial;
z-index:1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:15px;
line-height:25px;
font-size:90%;
}


#topbox {
background-color:white;
width:50000px;
height:50px;
position:relative;
bottom:8px;
right:8px;
padding-right:20px;
}


@media screen and (min-width:1008px) {

#textbox {
    width:auto;
    }
}


@media screen and (max-width:1006px) {

#textbox {
    width:auto;
}
}


#footer {
background-color:gray;
height:75px;
position:absolute;
bottom:0px;
left:0px;
color:lightgray;
font-family:arial;
width:100%;
}


.backgroundimage {
border-bottom:300px solid rgb(247,145,47);
border-right:3000px solid transparent;
z-index:0;
position:relative;
right:110px;
bottom:70px;
}

Please read carefully through my code tosee what I have attempted, and how everything works together. I have had no issues with the page at all, so if there is code completely irrelevant to the footer just leave it as is. Also please actually read through what I have already said so you are fully aware of what I am trying to achieve. Many thanks in advance.

Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Scott, Nov 12 '16 at 20:26

score 0 · Answer 1 · answered Nov 12 '16 at 20:29

0

Make it position:absolute

#footer { 
position:absolute; 
bottom:0; 
left:0;
right:0; 
}

answered Nov 12 '16 at 20:29

jafarbtech

6,842
1
36
55

Terence Hill · Accepted Answer · 2016-11-16T17:12:11.443

If you mean a sticky footer, which is always on bottom position at less content. When more content is visible the footer is scollable again.

One way is to use flexbox. Use a wrapper and two divs inside. The Second is the footer. Then you give the first div more space.

This technic works in all modern browsers.

*{
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

<body>
  <header>header…</header>
  <main>main…</main>
  <footer>footer…</footer>
</body>

score 0 · Answer 3 · answered Nov 12 '16 at 22:46

if I understood correctly what you want, try this:

.backgroundimage {
  border-bottom: 300px solid rgb(247,145,47);
  z-index: 0;
  position: relative;
  right: 110px;
}

#footer {
  background-color: gray;
  height: 75px;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 0px;
  color: lightgray;
  font-family: arial;
  width: 100%;

}

pol · Answer 4 · 2016-11-12T22:21:58.090

Wrap all the elements in a div

<body>
  <div> ...all your content... </div>
  <div id"footer"></div>
</body>

jsfiddle link

#box {
  position: relative;
}

.boxa {
  left: 173px;
  bottom: 34px;
  width: 249px;
}

.boxb {
  left: 430px;
  bottom: 55px;
  width: 90px;
}

#textbox {
  position: relative;
  background: rgba(255, 255, 255, 1);
  padding: 7.5px;
  font-family: arial;
  z-index: 1;
  //box-shadow:0 0 30px rgba(000,000,000,1);
  border-radius: 15px;
  line-height: 25px;
  font-size: 90%;
}

#topbox {
  background-color: white;
  width: 50000px;
  height: 50px;
  position: relative;
  bottom: 8px;
  right: 8px;
  padding-right: 20px;
}

@media screen and (min-width:1008px) {
  #textbox {
    width: auto;
  }
}

@media screen and (max-width:1006px) {
  #textbox {
    width: auto;
  }
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  min-height: 100%;
  padding-bottom: 75px;
  /*size of the footer*/
  position: relative;
  margin: 0;
  box-sizing: border-box;
}

#footer {
  background-color: gray;
  height: 75px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: lightgray;
  font-family: arial;
  width: 100%;
}

.backgroundimage {
  border-bottom: 300px solid rgb(247, 145, 47);
  border-right: 3000px solid transparent;
  z-index: 0;
  position: relative;
  right: 110px;
  bottom: 70px;
}

<div id="mainpart">
  <div id="topbox">

    <img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">

    <div id="box" class="boxa">
      text1
    </div>

    <div id="box" class="boxb">
      text2
    </div>

  </div>

  <div style="position:absolute;top:10px;right:0px;">
    <img>
  </div>

  <div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>

  <img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">

  <div class="backgroundimage"></div>
</div>
<div id="footer">
  <p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p>
</div>

Suggest you to read the question again "Using fixed would obviously not do what I want I want the user to scroll down to the bottom of a page to find the footer there, like with most websites." — Saurabh Sharma, Nov 12 '16 at 20:31
@H3ll0 I have updated the answer. Does it fit to your taste now? — pol, Nov 12 '16 at 22:02

How to keep website footer at bottom even when page expands downwards

4 Answers4