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ビンの実例。

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

あなたは絶対的なポジショニングでそれを行うことができます：

#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 に答える
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 に答える