JavaScript将隐藏“一页”网站上的部分间距
JavaScript将隐藏“一页”网站上的部分间距
提问于 2011-11-23 06:29:35
我正在做一个“时髦的”单页面网站，当你点击一个菜单选项时，它会将你向下滚动到页面区域。
我有一个关于“间距”的问题，例如，如果我点击菜单上的“关于我们”，它会向下滚动，但会显示下面区域的一部分。(见屏幕截图)：
如果你愿意，可以看看我的源码：http://www.londonadvertising.com/2011/
非常感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-11-23 07:58:34
这只是开庆的答案，加上了一个标题：
<body>
<div id="header">...</div>
<div id="container">
<div id="home">Some home page stuff</div>
<div id="about">About us</div>
</div>
</body>css：
body, #header, #container {
width:100%;
height:100%;
overflow:hidden;
}
#header, #container {
position:absolute;
}
#header {
top:0;
height: 30%; /* or em or whatever */
}
#container {
bottom: 0;
top: 30%; /* when using percentages of course we also could've used height */
}
#home, #about {
width:100%;
height:100%;
}所以你不需要任何javascript来实现高度魔术。
Stack Overflow用户
发布于 2011-11-23 06:46:47
您可以设置每个页面部分的高度以匹配用户的屏幕。
我做过很多ajax only站点，我遵循的总体布局是这样的：
<div id="container">
<div id="home">Some home page stuff</div>
<div id="about">About us</div>
</div>css：
body{
width:100%;
height:100%;
overflow:hidden;
}
#home, #about{
width:100%;
height:100%;
}然后，我会根据需要移动容器。看起来你的网站几乎都在做这件事，只是你没有为每个区域设置一个高度。可以理解，因为它具有恒定标题，其中屏幕的其余部分不是恒定百分比。您可以使用jquery在加载时重置内部元素高度，以使每个部分与正确的区域相匹配。
一般的概念是
$(window).height() - $('header').height() = your viewport height然后根据需要将其应用于每个内部页面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8234803
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号