Question:

CSS - Making a div extend the rest of the screen?

by | earlier

My Dream:

I have a header with the height of let's say 54px. Then i have a body which fills 100%-54px-32px of the screen. The footer is 32px.

How do i make the body fill all of the rest of the screen (100%-54px-32px) ?

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

2 ANSWERS

Sort By: Date | Rating

You seem to be mixing fixed and fluid CSS development. If you want to use fluid then you are going to need to learn about how to manage the divs while keeping them able to shift around and expand. If you want to use fixed you have to define exact pixel amounts.

Check out: http://www.glish.com/css/

That site has great examples of how to make fluid code, and also how to setup fixed width too.

Chad
Report (0) (0) | earlier
<style>

*{

margin:0;

padding:0;

}

body{

min-height:100%;

position:relative;

}

.header{

background-color:red;

height:54px;

}

.footer{

background-color:yellow;

height:32px;

position:absolute;

bottom:0;

width:100%;

}

.main{

padding-bottom:32px;

}

</style>

<body>

<div class="header">Header</div>

<div class="main">Main</div>

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

</body>

hope that helps
Report (0) (0) | earlier