How to make a div responsive height between header and footer with CSS only?

Question

I have an HTML page with fixed height header and footer and a element in between.

I want the element to have always the total height of the screen (excluding the h

Answer 1

I recommend to you the Flexible Box Layout Module, which has good support in your case (IE10+). Many classic problems with CSS can be easily solved with it, take a look at the Solved by Flexbox list.

A simple approach to face your problem would be to following HTML:

<div class="container">
    <header>Header</header>
    <main>Page contents</main>
    <footer>Footer</footer>
</div>

With a simple CSS:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.container main {
    flex-grow: 1;
    flex-shrink: 0;
}

Pay attention that the spec has changed three times since 2009, so there are little differences in sintax and needs of vender prefixes. The links that I showed talk about it too. Of course, it doesn't matter if you choose to use autoprefixer.

Answer 2

Try this,

HTML

<div class="pagewidth">
    <header>
    </header>
    <section class="wrapper">
    </section>
    <footer>
    </footer>
</div>

CSS

html,body{
    height: 100%;
    background: black;
    margin:0;
    padding:0;
}
*{
   box-sizing: border-box;
}
.pagewidth{   
    position: relative;
    height: 100%;
    min-height:100%;
}
header{
    background: green;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 30px;
    z-index:2;
}
.wrapper{
    background: black;
    position: absolute;
    left:0;
    top:0;
    z-index:1;
    width:100%;
    height:100%;
    padding: 30px 0;
}
footer{
    background: blue;
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
    height: 30px;
    z-index:2;
}

https://jsfiddle.net/rtwLe6zu/

Answer 3

Here is a quick tip for creating responsive elements that retain their aspect ratio as they scale.

However, when we specify a padding-bottom value for the same element, the padding measurement is calculated relative to the element’s width:

.rect {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

Correct aspect ratio

You will notice that I have set the element’s height property to 0, to ensure that the height of any child elements will not be added to the padding value when the visible height is calculated.

A note about child elements

If you also want to specify percentage based heights for a child element, you will need to assign an absolute or relative position value to both the parent and the child:

.rect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
 }
.rect p {
    position: absolute;
    margin: 0;
    height: 100%;
    }

View A Demo

Answer 4

* { padding: 0; margin: 0; }
body { height: 100%; width: 100%; position: absolute; }
header, footer { height: 50px; width: 100%; background: red; position: fixed; }
footer { bottom: 0; }
main { min-height: calc(100% - 100px); padding: 50px 0; overflow: auto; }

<header></header>
<main>
    <p>Hello1</p>
    <p>Hello2</p>
    <p>Hello3</p>
    <p>Hello4</p>
    <p>Hello5</p>
    <p>Hello6</p>
    <p>Hello7</p>
    <p>Hello8</p>
    <p>Hello9</p>
    <p>Hello10</p>
    <p>Hello11</p>
    <p>Hello12</p>
    <p>Hello13</p>
    <p>Hello14</p>
    <p>Hello15</p>
    <p>Hello16</p>
    <p>Hello17</p>
    <p>Hello18</p>
    <p>Hello19</p>
    <p>Hello20</p>
</main>
<footer></footer>

Answer 5

You can use absolute positioning to achieve this.

Try the following

CSS

.content {
    position:absolute;
    top:100px; /* make this equal to the height of your header tag */
    bottom:100px; /* make this equal to the height of your footer tag */
    left:0;
    right:0;
}
header {
    height:100px;
    background:green;
}
footer {
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:red;
}

1. Give your header a fixed height.

2. Give your footer a fixed height and position:absolute with a bottom:0, left:0; and a right:0;.

3. Make your content div position:absolute and give it a left:0; and a right:0;. Make the top position equal to the height of your header and the bottom position equal to the height of your footer.

http://jsfiddle.net/z4h64juf/1/

Hope that helps.

Answer 6

you can do this with css calc:

html,body{ height:100%; }
.content{
    height: calc(100% - 120px);
}

Of course, you have to change 120px for whatever is the sum of the footer and the header height. And don't forget about the vendor prefixes.

More info: https://developer.mozilla.org/es/docs/Web/CSS/calc

An advice: don't forget to use the units inside the () and don't forget to use spaces around the - + * signs or it won't work.