页面缩放时linear-gradient线性渐变背景被截断问题求助

你当前给html和body设置height: 100%的问题在于：这个属性只会让元素高度等于初始的视口高度。当页面内容高度超过视口，或者调整窗口尺寸后内容需要更多垂直空间时，body的高度不会自动扩展，导致渐变背景只覆盖到初始的100%视口高度，超出部分就会显示空白。而纯色背景看起来正常，是因为默认的background-repeat: repeat会重复填充，但这不是解决问题的根本办法。

方案一：使用min-height替代height #

把html和body的height: 100%改成min-height: 100%，这样body的高度至少是视口高度，当内容增加或窗口调整时，body会自动延伸，渐变背景也会跟着覆盖整个页面高度：

html, body {
    min-height: 100%;
}

body {
    background: linear-gradient(to bottom, #cfdfff, #75b5e3);
    margin: 0; 
}

方案二：固定背景位置 #

给body添加background-attachment: fixed，让渐变背景固定在视口范围内，不管页面滚动还是窗口尺寸调整，都会始终覆盖整个视口：

html, body {
    height: 100%;
}

body {
    background: linear-gradient(to bottom, #cfdfff, #75b5e3);
    background-attachment: fixed;
    margin: 0; 
}

两种方案的区别 #

• 方案一：渐变会随着body内容的延伸而持续渲染，页面滚动时渐变是跟着内容流动的。
• 方案二：渐变固定在视口位置，滚动页面时渐变不会移动，内容在渐变背景上方滚动。

你可以根据自己的页面交互需求选择合适的方案。

内容的提问来源于stack exchange，提问作者solidsnake99