CSS linear-gradient出现水平断层问题求助

问题原因 #

页面内容较少时，body元素默认高度仅由内部内容撑开，未铺满整个浏览器视口。渐变背景默认会重复渲染，导致视口空白区域重复渐变，形成水平断层。

修复方案 #

修改CSS，给html和body添加高度设置，同时禁止背景重复：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

html, body {
    min-height: 100vh; /* 确保元素铺满视口高度 */
}

body {
    background: rgb(45,20,44);
    background: -moz-linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    background: linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d142c",endColorstr="#ee4540",GradientType=1);
    background-repeat: no-repeat; /* 禁止背景重复渲染 */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Sans;
    /* background-color: white; */
}

补充说明 #

• min-height: 100vh 保证元素高度至少等于视口高度，即使内容不足也能撑满屏幕。
• 如果需要滚动页面时背景固定不变，可以额外添加 background-attachment: fixed; 样式。

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