使 1 页没有滚动 CSS

Question

想要显示 1 个静态页面包含所有内容而无需滚动

试图使 Boddy 填充 0 和溢出：隐藏但没有任何效果 还尝试了下面的页眉和背景图像代码也不起作用

display: flex!important;
flex-direction: column!important;
min-height: 1vh!important;
}```
```.background-image {flex-grow: 1!important;}
1 page with cover image and footer info, dont know what i am missing to fix that

Answer 1

如果将正文设置为在 css 中隐藏溢出 y，则不允许用户向下滚动页面。

body {
overflow-y: hidden;
}

Answer 2

转到根 html 元素，您可以将其样式设置为：

html {
height: 100%;
width: 100%;
overflow: hidden;
}

浏览器会将此解释为 html 将使用 100% 的可用设备宽度空间并隐藏其余空间。

Answer 3

您可能不想避免滚动，而是使页面元素适合屏幕，这样就不会有滚动条，并且所有内容仍然可见。

首先，您可以将 .main 类(仅包含您的页脚(绝对放置在底部并从那里获取

.main {
position: absolute;
bottom: 0;
width: 100%;
}

或者，我更喜欢将包装器设置为弹性框： 更新

body.home {
height: 100%;
overflow: hidden;
}
body.home .wrapper {
display: flex;
flex-direction: column;
}
/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}