我有一个永不滚动的页面,并且始终是屏幕的整个宽度和高度。
此页面中的所有内容都应垂直居中。应该没有滚动。
这是代码的bootply。如果需要,我可以在这里添加实际代码,但只是以这种方式提供它似乎更容易。
http://www.bootply.com/tDsB8L0er7
如果您调整预览窗口的大小,您将看到即使高度应为100%且内容超出高度,您仍然可以滚动一些。
答案 0 :(得分:1)
我会让.wrapper
的{{1}}高度,如果您的内容在视口之外出血,请使用100vh
来阻止任何滚动条显示,然后应用overflow: hidden
它是孩子,display: flex; justify-content: center; align-items: center
将集中在中间
.container
body {
margin: 0;
}
section {
margin-top: 30px;
text-align: center;
}
.message {
font-weight: 900;
font-size: 52px;
font-family: 'Lora', serif;
}
.dim-10 {
opacity: 0.1;
filter: alpha(opacity=10);
}
.input-group-lg > .form-control, .input-group-lg > .input-group-btn > .btn {
font-size: 40px;
}
.awards img {
padding-left: 5px;
padding-right: 5px;
}
.wrapper {
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
答案 1 :(得分:0)
要推荐的一件事。小心100vh值。如果您在iOS移动浏览器Safari中查看示例,您可以看到如果向下滚动,viewheigt会动态更改。这可能会弄乱100vh值,因为您的站点将在滚动时使用移动浏览器视口进行拉伸和缩小。
这是一个如何做到这一点的例子: https://codepen.io/joelstuedle/pen/gmomGe
我正在做的是以下内容:
至少需要两个元素才能使垂直居中成为可能。我使用了html
和body
元素。
这些元素所需的css如下所示:
html {
display: table;
width: 100%;
height: 100%;
}
body {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}