How to make the main content div fill height of screen with css

No Javascript, no absolute positioning and no fixed heights are required for this one.

Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:

/* Reset */

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


/* Essentials */

.container {
  display: table;
}

.content {
  display: table-row;
  height: 100%;
}

.content-body {
  display: table-cell;
}


/* Aesthetics */

.container {
  width: 100%;
  height: 100%;
}

.header,
.footer {
  padding: 10px 20px;
  background: #f7f7f7;
}

.content-body {
  padding: 20px;
  background: #e7e7e7;
}
<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.


These are not necessary

  • remove height in %
  • remove jQuery

Stretch div using bottom & top : 

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

check my code : http://jsfiddle.net/aslancods/mW9WF/

or check here:

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;
}
<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    &nbsp;
</div>

Tags:

Javascript

Html

Css

Recent Posts