jquery - 如何防止背景渐变从头开始？

Question

我有一个简单的网站，上面有一些文章/卡片。作为背景，我使用渐变。

body, html {
    height:100%;
    padding:10px 0 0 0;
    margin:0;
    background: #99b8cc;
    background: linear-gradient(to top, #c8dae6 33%, #99b8cc 100%);
    font-family:'Open Sans', sans-serif;
    height: 1000px;
    max-width: 1000px;
    /*overflow-y: scroll;*/
}

没关系!单击卡片后，它会展开，这也会增加整个页面的高度。但是当达到“第一个 100% 高度”时，背景渐变会重新开始。

如何防止它重新开始？渐变应始终使用“新的”100% 页面高度。

如果有帮助，此页面上使用了 jQuery。

Answer 1

你的 height首先定义为 100% ，但之后，您用 height: 1000px; 重新定义它, 并覆盖第一个。

只需删除 height: 1000px;解决这个问题。

或者，您可能需要这条规则:min-height: 1000px; (而不是 height: 1000px; )取决于您要做什么。