使用css或jquery的响应式宽度和高度布局[关闭]
Posted
技术标签:
【中文标题】使用css或jquery的响应式宽度和高度布局[关闭]【英文标题】：Responsive Width and Height Layout using css or jquery [closed] 【发布时间】：2013-02-16 00:12:49 【问题描述】：我正在尝试创建一页响应式 html 布局。
这是我的虚拟图像
第一个布局是我想要实现的，但如果真的很难，那么第二个布局对我来说也可以。
我正在尝试使主着陆区或幻灯片完全适合屏幕（全屏）
我找到了一个类似于 layout2 的 wordpress template，但我不知道他们是如何做到的。
【问题讨论】：
我建议您尝试将一些东西放在一起，然后在需要时回来寻求帮助 - 那里有很多响应式布局模板/框架。 Stack Overflow 不是从零开始寻求“完整解决方案”的地方。 但丹尼尔在这里自己解决了我的问题，我只询问幻灯片的响应部分而不是完整的解决方案。 【参考方案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,#footerwidth:100%;height:100%;
#header background-color:blue;
#content background:red;
#footer background:green;
【讨论】：
是的，实际上我忘记为 HTML 添加 100%。并且还需要边距 0 和填充 0。以上是关于使用css或jquery的响应式宽度和高度布局[关闭]的主要内容，如果未能解决你的问题，请参考以下文章