Question

我甚至不知道我问的是否可能，但值得一试。基本上我有一个由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%;
}

Answer 1

我马上看到的两件事。首先，您的CSS规则应为.home.resize而不是home resize。其次，当使用百分比时，高度要求在html标签上设置高度以产生差异。所以你需要这样的规则：

html {
    min-height: 100%;
}

.home.resize {
    height: 100%;
}

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

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

Answer 2

首先要做的事情。 HTML ID不能包含空格。您应该定义一个类名称resize。话虽如此。您可以使用此功能实现此目的。

这是 fiddle

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

    .resize{
    display:block;
    height:100vh;
    margin:0;
}

#home{
    background-color:red;
}
#about{
    background-color:blue;
}

vh是视口高度。它会将div的高度设置为与视口相同。 1vh相当于视口高度的1/100

将DIV调整为一页滚动网站

2 个答案: