使用css或jquery的响应式宽度和高度布局[关闭]答案

【问题标题】：Responsive Width and Height Layout using css or jquery [closed]使用css或jquery的响应式宽度和高度布局[关闭]
【发布时间】：2013-02-16 00:12:49
【问题描述】：

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

这是我的虚拟图像

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

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

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

【问题讨论】：

我建议您尝试将一些东西放在一起，然后在需要时回来寻求帮助 - 那里有很多响应式布局模板/框架。 Stack Overflow 不是从零开始寻求“完整解决方案”的地方。
但丹尼尔在这里自己解决了我的问题，我只询问幻灯片的响应部分而不是完整的解决方案。

标签： jquery html css height responsive-design

【解决方案1】：

您只需要确保您的内容适合 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>

【讨论】：

谢谢它帮助了我。新手在这里:)

【解决方案2】：

尝试查看并尝试更新 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;}

【讨论】：

是的，实际上我忘记为 HTML 添加 100%。并且还需要边距 0 和填充 0。