tho*_*m_p 4 jquery jquery-plugins viewport responsive-design
我一直在寻找一种方法来实现这一目标,但似乎无法找到答案.我想创建一个单页网站,将被由一系列面板,视窗的各个尺寸(无论是在高度和宽度),并用不同的背景颜色的.
因此,当我进入页面时,我的视口充满了面板1,然后我可以向下滚动到面板2,它也将完全填充视口.
这是一个快速测试页面来说明我的意思:http://dev.manifold.ws/test/ 但是,显然,我想要的是每个面板的高度为视口的100%(不是固定高度).
这是一个更成功的网站:http://www.deuxhuithuit.com
我觉得必须有一个相当简单的方法来实现这一点,但我似乎无法找到它.
任何帮助将不胜感激.我需要一些jQuery吗?我应该依赖插件吗?或者有没有办法用CSS做到这一点?
谢谢,
-Thom
好的,所以看起来我终究解决了.最后它真的很简单.不需要jQuery或插件.我用一个工作示例更新了我的测试页面:http://dev.manifold.ws/test/
这是HTML:
<body>
<section id="red">
</section>
<section id="blue">
</section>
<section id="green">
</section>
</body>
Run Code Online (Sandbox Code Playgroud)
而CSS:
html,body {
height:100%;
margin:0;
padding:0;
}
#red {
min-height:100%;
position:relative;
background:#F00;
}
#blue {
min-height:100%;
position:relative;
background:#00F
}
#green {
min-height:100%;
position:relative;
background:#0F0;
}
Run Code Online (Sandbox Code Playgroud)
非常直截了当.
| 归档时间: |
|
| 查看次数: |
5000 次 |
| 最近记录: |