Reputation: 21396
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
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
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