-4

1 ページのレスポンシブ HTML レイアウトを作成しようとしています。

ここに私のダミー画像があります 画像

最初のレイアウトは私が達成しようとしているものですが、それが本当に難しい場合は、2番目のレイアウトでも問題ありません。

ホーム ランディング エリアまたはスライドを画面に完全に収まるようにしようとしています (フルスクリーン)

layout2 に似たwordpress テンプレートを見つけましたが、どうやってそれを行ったのかわかりません。

4

2 に答える 2

0

これを見て、 http://jsfiddle.net/H2RyR/を更新してみてください 

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

html, body, #header,#content,#footer{width:100%;height:100%;}
#header{ background-color:blue;}
#content{ background:red;}
#footer{ background:green;}
于 2013-03-01T13:54:30.283 に答える
0

コンテンツが 100% の高さと幅に収まるようにするだけです。また、body と HTML タグの高さと幅は 100% にする必要があります。

CSS:

body,html,.content,.contact,header{
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}
.content{
  background:yellow;
}
header{
  background:red;
}
.contact{
  background:blue;
}

HTML:

<body>
<header>

</header>
<div class='content'>

</div>
<div class='contact'>

</div>
</body>
于 2013-03-01T13:20:21.567 に答える