CODEWITHSUNDEEP
htmlcss
SunBro
SunBro

Reputation: 15

Footer at bottom

After having built 3-4 sites(yeah still an amateur), I'm still dealing with keeping footer at bottom. Here's my js fiddle http://jsfiddle.net/kY8hY/

The footer was just fine until I began building the body and then, when I entered some values to the content, that wall of text, the footer came up.

Here is another jsfiddle which I can keep the footer at the bottom. http://jsfiddle.net/2J2TH/

You will notice that I took out an entire div (anasayfaicerik) and replaced it with another div (deneme) with the exact same value.

<div id="shakingmygoddamnhead>yup</div> stack forces me to do this.

What is clashing? Which value of "anasayfaicerik" is clashing with "footer"

I tried deleting everything one by one to see if the problem would go away but no man. It's there unless I delete the whole "anasayfaicerik" div

Upvotes: -1

Views: 171

Answers (4)

cor3tweaks
cor3tweaks

Reputation: 1

JUST ANOTHER WORKING EXAMPLE

This example is working and it is quite simple I think. The CSS is just an example. This should work with loose divs and also with flexbox items. Also this example is simple "pimpable".

Think about, you have the content of the document.
For example: 'header' and 'content' and 'footer'

(You can have as much elements you want. In this example, you need only the same 'css class name' in the 'html code' for all elements, that are not the footer. In this example the 'class name' for these elements is 'container')

// get footer
const footer = document.getElementById('footer');

// get the footer root height that was computed from default setting
// this is the value that makes the footer always the correct height
// if the windowInnerHeight was smaller than all content in document
const footerRootHeight = parseInt(window.getComputedStyle(footer,null).getPropertyValue('height').match(/\d+/));

function setFooterPosition() {

    // get actual dynamic window inner height
    let windowInnerHeight = window.innerHeight;

    // set container to store all document content except footer
    let container = document.getElementsByClassName('container');

    // new container height
    let containerHeight = 0;

    for ( let i = 0; i < container.length; i ++ ) {

        // get the overall complete container height
        containerHeight += container[i].offsetHeight;

    }
    
    // get height of content including footer root height
    // in case, windowInnerHeight is smaller than content
    let overallHeight = containerHeight + footerRootHeight;

    // set footer height in case that windowInnerHeight is
    // larger than container content stored in the document
    let footerHeight = windowInnerHeight - containerHeight;

    if(windowInnerHeight <= overallHeight){

        // windowInnerHeight is smaller than content
        // > set footer height back to core settings
        footer.style.height = footerRootHeight + "px";
        
    } else {
        
        // windowInnerHeight is bigger than content
        // > set footer height to new dynamic value
        footer.style.height = footerHeight + "px";

    }
}

setFooterPosition();

window.addEventListener("resize", (event) => {

        setFooterPosition();
    
    },
);
* {
    margin: 0;
    padding: 0;
}
.header {
    padding: 10px;
    background-color: bisque;
}
.content {
    height: 600px;
    padding: 10px;
    background-color: orange;
}
.footer {
    padding: 10px;
    background-color: pink;
}
<div class="container header">
    HEADER
</div>

<div class="container content">
    CONTENT
</div>

<div class="footer" id="footer">
    FOOTER
</div>

The 'event-listener' is just for the case, someone is resizing. I found, that would be useful. You should run it through a 'throttle-function' I guess. I do and it's working like a charm.

I can't test all for sure. That's not possible.

Tested and working in (October 2023):

  • Chrome Desktop
  • Firefox Desktop
  • Chrome Mobile
  • Firefox Mobile
  • Brave Mobile
  • DuckDuckGo Mobile
  • Opera Mobile
  • Opera Mini Mobile
  • UC Browser Mobile
  • Edge Mobile
  • Mi Browser Mobile
  • Vivaldi Browser Mobile

It should work, even when mobile view is taken to Landscape Mode. And I think, you can use "all" kinds of html elements for the content. Just style all with css and you are ready to go.

I put all in the function, if something changes dynamically. So the content can change along with the height of the content and the height of the document.

This is my first post here. So please don't be too hard to me ;) - if something is not correct or not working. I will correct asap. I tried, to keep all simple as possible. Have a nice day.

Upvotes: 0

Matyas
Matyas

Reputation: 13702

The problem is that the content inside #adadil is floated, therefore #adadil ignores their sizes.

You need a clearfix that forces the container to actually contain the floated content.

For example bootstrap's clearfix looks like the following:

  .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }

And then you simply add the clearfix class to #adadil div. (No extra html would be needed)

Working example

Upvotes: 0

Shubham B
Shubham B

Reputation: 366

Check http://jsfiddle.net/shubhambhave/F8Hf7/2/

I just set 

#footer {
position: relative;
display: inline-block;
}

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

The problem is with the CSS applied to the #anasayfaicerik element.

Since its contents are floated, you need to make the container expand to fit its content.

Adding overflow:hidden to it fixes it.

Demo at http://jsfiddle.net/kY8hY/4/

Upvotes: 2

Related Questions