1

假设我有一个标题 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%？

谢谢

4

3 回答 3

2

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%;
}
于 2013-02-10T02:15:31.550 回答
1

试试这个：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;
}
于 2013-02-10T02:33:33.013 回答
1

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

#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 片段以了解它的实际效果。

于 2013-02-10T02:12:54.470 回答