JavaScript在'；一页'；隐藏站点_Javascript_Jquery_Css

JavaScript在'；一页'；隐藏站点

javascript jquery css

JavaScript在'；一页'；隐藏站点,javascript,jquery,css,Javascript,Jquery,Css,我正在一个“流行”的单页网站上工作，当你点击一个菜单选项时，它会将你向下滚动到页面区域我有一个关于“间距”的问题，例如，如果我在菜单上单击“关于我们”，它会向下滚动，但会显示下面的部分区域。（见截图）：如果您愿意，请查看我的来源：非常感谢您可以设置每个页面部分的高度以匹配用户的屏幕我已经做过很多只使用ajax的网站，我遵循的总体布局如下： <div id="container"> <div id="home">Some home page stuff&l

我正在一个“流行”的单页网站上工作，当你点击一个菜单选项时，它会将你向下滚动到页面区域

我有一个关于“间距”的问题，例如，如果我在菜单上单击“关于我们”，它会向下滚动，但会显示下面的部分区域。（见截图）：

如果您愿意，请查看我的来源：

非常感谢

您可以设置每个页面部分的高度以匹配用户的屏幕

我已经做过很多只使用ajax的网站，我遵循的总体布局如下：

<div id="container">
    <div id="home">Some home page stuff</div>
    <div id="about">About us</div>
</div>

然后根据需要移动容器。看起来你的网站基本上就是这么做的，只是你没有为每个区域设置一个高度。可以理解，因为它有一个恒定的标题，屏幕的其余部分不是一个恒定的百分比。可以使用jquery在加载时重置内部元素高度，以使每个截面与正确的区域相匹配

一般概念是

$(window).height() - $('header').height() = your viewport height

然后根据需要将其应用于每个内部页面。

这只是Kai Qing的答案，并添加了标题：

<body>
    <div id="header">...</div>
    <div id="container">
        <div id="home">Some home page stuff</div>
        <div id="about">About us</div>
    </div>
</body>

因此，高度魔法不需要任何javascript。

这取决于屏幕大小。我没有这种感觉。嗯，那么你认为没有办法控制屏幕大小的依赖性吗？我可以通过在div元素的底部添加更多的边距来弥补平均屏幕大小。

<body>
    <div id="header">...</div>
    <div id="container">
        <div id="home">Some home page stuff</div>
        <div id="about">About us</div>
    </div>
</body>

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%;
}