html - 将DIV调整为一页滚动网站的大小

我什至不知道我要问的事情是否可能，但是值得一试。基本上，我有一个由jQuery控制的单页滚动网站，但这是一个非常非常简单的代码，没有插件或外部文档。很好。

如果您将每个“页面”划分为不同的div，以分别控制每页的图片，表格，字体等功能。像这样：

//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>

依此类推...等等，我的问题是，我可以做这样的事情吗？我已经尝试过了，但是也许我在正确的位置没有“十进制” ...

//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>

然后CSS是

home resize {
position: relative;
height: 100%;
width: 100%;
}

最佳答案

我马上看到两件事。首先，您的CSS规则应为.home.resize而不是home resize。其次，当使用百分比时，高度要求在html标记上设置高度才能有所作为。因此，您将需要如下规则：

html {
    min-height: 100%;
}

.home.resize {
    height: 100%;
}

否则，高度将永远不会占据整个浏览器窗口的高度。

总而言之，我想您最好的解决方案将以某种方式涉及JS或jQuery。我知道有几个单页滚动插件可以很好地完成这项工作。

关于html - 将DIV调整为一页滚动网站的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22053564/