CODEWITHSUNDEEP
htmlcssfooter
Shikhil Bhalla
Shikhil Bhalla

Reputation: 392

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;

}

Upvotes: 1

Views: 82

Answers (1)

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

DEMO

JS

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

Upvotes: 1

Related Questions