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

This question already has an answer here:

Make a div fill the height of the remaining screen space 31 answers

---

no height in % is needed

no jQuery is needed

(!) 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/

---

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 :

CSS

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

HTML

<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>

See it in action here: http://jsfiddle.net/AzLQY/

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.

---

There is a CSS unit called viewport height / viewport width.

Example

.mainbody{height: 100vh;} similarly html,body{width: 100vw;}

or 90vh = 90% of the viewport height.

**IE9+ and most modern browsers.

链接地址: http://www.djcxy.com/p/15508.html

上一篇: 使用display：flex填充剩余的垂直空间

下一篇: 如何使主要内容div用CSS填充屏幕高度