英文:
Issue with fullpage.js (section fp-section fp-is-overflow active fp-completely)
问题
我希望在这个部分中有一个高度为100%的容器，而不是只有我的容器占屏幕的一个小百分比，其余的被(section fp-section fp-is-overflow active fp-completely)占据，我无法改变它，请帮忙。
这是我现在的样子，这是我div可用的唯一空间
这是我想要的空间
在这里，你可以看到我有一个高度为100%的div，就像我想要的那样
在第二个部分，div也是完美的，就像我想要的那样
.container-general {
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.container-general-2 {
height: 100%;
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
gap: 30px;
box-sizing: border-box;
}
.container-3{
height: 100%;
display: flex;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
gap: 30px;
box-sizing: border-box;
}
英文:
I want to have my container in this section with height 100% insted of that my container only takes one little percentage of the sreen and the rest is taken by (section fp-section fp-is-overflow active fp-completely) and I cannot change it, please help.
This is how I have it, That's the only space available for my div
This is the space i want to have
Here you can see I have my div with height 100% as I want it
In the second section the div is perfect as well, just as i want it
.container-general {
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.container-general-2 {
height: 100%;
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
gap: 30px;
box-sizing: border-box;
}
.container-3{
height: 100%;
display: flex;
justify-content: center;
grid-template-columns: 1fr 1fr;
overflow: hidden;
gap: 30px;
box-sizing: border-box;
first two containers working fine, Third one is not
答案1
得分: 0
你可以将 height: 100%; 替换为 height: 100vh。
或者，如果你不打算使用可滚动的部分，可以使用选项 scrollOverflow: false。
.container {
background: red;
height: 100vh;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
}
英文:
You can replace your height: 100%; for height: 100vh.
That, or use the option scrollOverflow: false if you do not plan on having scrollable sections.
.container {
background: red;
height: 100vh;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论