调整DIV为一页滚动网站

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

如果你愿意的话，每个“页面”都可以分成不同的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%; 
}

来源

2014-02-26 user3357794

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

html { 
    min-height: 100%; 
} 

.home.resize { 
    height: 100%; 
}

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

这一切都说，我想你最好的解决方案会涉及JS或jQuery在某种程度上。我知道有几个单页滚动插件可以很好地完成这项工作。

来源

2014-02-26 21:29:42

第一件事第一件事。 HTML ID不能包含空格。您应该定义一个类名称调整大小。话虽如此。你可以通过使用这个来实现这一点。

这里是一个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处

来源

2014-02-26 21:29:49

调整DIV为一页滚动网站

回答

相关问题