CODEWITHSUNDEEP
htmlcsspositioning
zippy
zippy

Reputation: 23

Make a Div Fill the Area Between a Header and Footer

To start, I am aware that this question has been asked many times previously, and answered about as many times as it has been asked. Unfortunately I have not been able to get the solutions provided here, here and here to work for me. I have only been using html and css for a few weeks, teaching myself through Codecademy. Sadly Codecademy's positioning tutorials are littered with bugs so the code I have here is the product of much trial and error and I'm not sure if any of it has been setup "correctly".

Without further ado, here's my current code:

HTML

<!DOCTYPE html> 
<html> 
    <head>
        <title>Header Test</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="content"></div> 
            <div class="footer"></div>
        </div>
    </body>
</html>

CSS

html, body { 
    height:100%;
    margin: 0;
    padding: 0;
}

.wrapper { 
    min-height: 100%;
    position: relative;
}

.header { 
    height: 75px;
    padding: 10px;
    background-color: red;
}  

.content { 
    height:100%;
}

.footer { 
    width:100%;
    height: 75px;
    bottom: 0;
    position: absolute;
    background-color: red;
}

This code makes me a header and footer with a content div between them. However, the content div is 0px tall. I would like the div to stretch from the bottom of the header to the top of the footer.

Here's a JSFiddle of my current code. Thanks in advance for any help.

Upvotes: 2

Views: 551

Answers (4)

claudios
claudios

Reputation: 6656

Your code is working actually. If <div class"content"> is empty then the height is 0px. Otherwise use fixed height value.

HTML:

    <body>
        <div id="header"></div>
            <div id="content"><div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada diam eu aliquet pretium. Donec dapibus condimentum lectus a porta. Fusce sed augue bibendum, egestas nisi rhoncus, varius lectus. Nullam vitae erat vitae purus dapibus aliquet. Praesent id urna aliquet, interdum mi sit amet, dictum nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris facilisis sodales ligula, nec pulvinar neque ornare et. Vivamus ultrices odio venenatis lectus semper, at luctus sem tempus. Ut molestie sem ac faucibus pulvinar. Ut in massa et mauris congue accumsan at eu magna. Sed augue risus, varius eget vehicula eget, fringilla in magna. Proin tempus ante leo, non tempor justo cursus a. Sed a posuere nisl.

Nulla imperdiet nulla auctor tellus ultricies, quis cursus libero finibus. Praesent sed justo nec ex blandit pretium non in eros. Praesent a mollis ante. Donec sit amet vehicula quam, ut euismod dolor. Vivamus vitae faucibus felis. Ut eget condimentum arcu. Curabitur vel felis tortor. Quisque a semper neque. Fusce a diam ac elit fringilla sodales sit amet vel ligula.

Donec blandit congue commodo. Etiam dolor tellus, viverra et molestie vel, bibendum non diam. Vivamus dignissim ac sapien eget vulputate. Pellentesque eu ex nec tellus malesuada sollicitudin. Vivamus non erat eu est dapibus accumsan nec a erat. Donec a ligula tellus. Maecenas et ullamcorper urna.

Morbi maximus, quam a vulputate hendrerit, augue enim consectetur massa, vel tristique dui felis vel leo. Ut id pellentesque nisi, eget congue magna. Nunc vitae auctor quam. Etiam varius, nisi sed cursus faucibus, felis metus luctus enim, eu consectetur elit nulla ut magna. Donec mi tortor, ultricies eget fringilla vitae, fringilla et nisl. Vestibulum vestibulum neque leo, in viverra sapien vehicula quis. Donec fermentum placerat dignissim. Duis vestibulum dolor a tellus eleifend ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis suscipit diam. Vivamus tristique dignissim fermentum. Phasellus eu cursus ipsum. Quisque magna purus, ultrices quis dolor vitae, dignissim pharetra nisi. Sed sollicitudin blandit nulla, a consequat lorem congue in. Fusce a dapibus orci. Aenean sed laoreet ex.

Aenean eget volutpat dui, a eleifend sem. Fusce malesuada sodales dapibus. Cras gravida ornare mauris, a ullamcorper massa pulvinar eu. Proin facilisis dapibus commodo. Nullam ac sem ultrices, iaculis nulla at, pulvinar velit. Cras auctor, mauris sit amet viverra tristique, nunc turpis faucibus lacus, at rutrum massa diam eu nisi. Aenean facilisis metus tempor accumsan tristique. Phasellus condimentum mauris a neque iaculis pretium ut vitae ligula. Vivamus congue mi eget sagittis iaculis. Praesent urna ipsum, porta in eros et, commodo vulputate odio. Vestibulum bibendum arcu sit amet orci viverra pellentesque. Etiam pellentesque sodales nisi, sit amet consequat mi ornare ut. Donec non cursus velit.
            </div>
        </div>
        <div id="footer"></div>
    </body>

CSS:

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
  padding: 70px 0;
}

Upvotes: 0

shA.t
shA.t

Reputation: 16958

I think you need this code:

.content { 
    height:100vh;
}

Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.[reference]

Upvotes: 0

Miro
Miro

Reputation: 8650

The 'modern' way is to use flexbox

DEMO

.wrapper { 
  min-height: 100%;
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}


.content { 
  flex:1;
  background:pink;
}

Edit: DEMO USING TABLE

Upvotes: 2

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

Here is your solution.

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

.wrapper {

  min-height: 100%;

  position: relative;

}

.header {

  height: 75px;

  padding: 10px;

  background-color: red;

}

.content {

  height: 100%;

  width: 100%;

  position: absolute;

  display: block;

  background-color: blue;

}

.footer {

  width: 100%;

  height: 75px;

  bottom: 0;

  position: absolute;

  background-color: orange;

}
<div class="wrapper">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

Upvotes: 0

Related Questions