Search code examples
htmlcssfooter

footer automatically take height according to screen

I am creating a webpage.I want my footer automatically increase height from his starting to the end of the screen if i decrease the content of middle div.Before that people ask about stucking the div to the bottom but i want to increase automatic height.

enter image description here

In this upper image the footer goes up and empty space produced which is not good.Now i dont want it stucks to bottom i want its height increased automatically from its starting to the end of doc.

My code for footer div is

#Footer {
background-color: #933;
height: auto;
width: 100%;
font-family: "Comic Sans MS", cursive;
font-weight: bold;
color: #FFF;
border-top-style: solid;
border-top-color: #000;

}

Solution

  • Like this

    DEMO

    JS

    function autoResizeDiv()
        {
            document.getElementById('Footer').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();