CODEWITHSUNDEEP
csscss-float
Alfred
Alfred

Reputation: 21396

Auto adjust div height to fill space - CSS

I have a top header <div id="header"></div>, a middle part <div id="content"></div> and a bottom footer <div id="footer"></div>.

Header and footer has fixed heights 50px. I want to fix the positions of header and footer on top and bottom and I want to stretch the middle part (content) to fill the remaining space.

How can I do this?

Upvotes: 2

Views: 3246

Answers (3)

Alfred
Alfred

Reputation: 21396

I made it by defining the style as below;

#header, #content, #footer {
    position: absolute;
}
#header{
    top: 0;
    width: 100%;
    height: 50px;
    left: 0;
    right: 0;
}
#content {
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
}

You can see my fiddle here

Thanks @rocky3000 and @Mika for support :)

Upvotes: 2

rocky3000
rocky3000

Reputation: 1120

You can use position: absolute on footer and header an then position the footer with bottom: 0px. I would do it this way:

#header {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2;
}

#footer {
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index: 2;
}

#content {
    top: 50px;
    width: 100%;
    position: absolute;
    z-index: 1;
}

Upvotes: 3

Mika
Mika

Reputation: 1539

Search for sticky footers LINK here on stackoverflow or with google and the problem is gone.

Upvotes: 0

Related Questions