-4

我正在尝试创建一页响应式 html 布局。

这是我的虚拟图像 图片

第一个布局是我想要实现的，但如果真的很难，那么第二个布局对我来说也可以。

我正在尝试使主着陆区或幻灯片完全适合屏幕（全屏）

我找到了一个类似于 layout2的wordpress 模板，但我不知道他们是如何做到的。

4

2 回答 2

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 回答
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 回答