H3ll0 H3ll0 - 22 days ago 6
CSS Question

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

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.

Answer

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.

Here is an example