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

这个问题在这里已经有了答案：

让div填充剩余屏幕空间的高度31个答案

---

不需要％的高度

不需要jQuery

（！）使用bottom＆top展开div：

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

检查我的代码：http://jsfiddle.net/aslancods/mW9WF/

---

没有JavaScript，没有绝对定位，没有固定的高度是必需的这一个。

以下是所有不需要固定高度或绝对定位的仅CSS / CSS方法：

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>

在这里看到它的行动：http://jsfiddle.net/AzLQY/

这种方法的好处是页脚和页眉可以增长以匹配他们的内容，并且主体会自动调整自己。 你也可以选择用css限制它们的高度。

---

有一个称为视口高度/视口宽度的CSS单位。

例

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

或90vh =视口高度的90％。

** IE9 +和大多数现代浏览器。

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

上一篇: How to make the main content div fill height of screen with css

下一篇: HTML table with 100% width, with vertical scroll inside tbody