Question

假设我有一个标题div，一个内容div和一个页脚div。

<div id="header">
   Title
</div>
<div id="content" style="background:red">
       <p>TEST</p>
</div>
<div id="footer">
   footer
</div>

如何将标题div设置为20％，内容为70％div，页脚为10％？

由于

Answer 1

Working example on JS Bin

HTML：

<!DOCTYPE html>
  <body>
    <div class="container">
      <div id="header" style="background:blue">
        Title
      </div>
      <div id="content" style="background:red">
        <p>TEST</p>
      </div>
      <div id="footer" style="background:gray">
        footer
      </div>
    </div>
  </body>
</html>

CSS：

* {
  margin: 0;
  padding: 0;
}

html,
body,
.container {
   height: 100%;
}

#header {
   height: 20%;
}

#content {
   height: 70%;
}

#footer {
   height: 10%;
}

Answer 2

你可以用绝对定位来做到这一点：

#header {
  position: absolute;
  top: 0;
  height: 20%;
  left: 0;
  width: 100%;
}

#content {
  position: absolute;
  top: 20%;
  height: 70%;
  left: 0;
  width: 100%; 
}

#footer {
  position: absolute;
  top: 90%;
  height: 10%;
  left: 0;
  width: 100%;
}

请参阅JSFiddle snippet了解它的实际效果。

Answer 3

试试这个：http://jsfiddle.net/9gHY4/2/

#header {
    position: absolute;
    height: 20%;
    width: 100%;
    top: 0;
    background-color: blue;
}
#content {
    position: absolute;
    top: 20%;
    height: 70%;
    width: 100%;
    background-color: red;
}
#footer {
    bottom: 0;
    position: absolute;
    height: 10%;
    width: 100%;
    background-color: green;
}

如何为HTML中的不同div分配修复百分比高度？

3 个答案: