Как я могу создать линейный градиент, который покрывает все видимое вертикальное пространство (или переходы в твердое тело?)

Question

Я пытаюсь заставить линейный градиент работать с элементом body моей страницы. Вот CSS:

body {
    background: linear-gradient(0deg, white, lightgray);
}

Однако при этом получается градиент от белого к светло-серому, как и ожидалось, но он появляется только за контентом, а не в «пустой» области под контентом, который простирается до нижней части окна браузера (когда контент не полностью заполните это конечно.)

Что еще более странно, так это то, что в «пустой» области задан какой-то «серый» уровень, и я не знаю, откуда он пришел и как его изменить.

Чтобы справиться с последним, я попробовал это, думая, что когда градиент был «сделан», он продолжил бы со сплошным цветом, но это не имело никакого эффекта:

body {
    background: linear-gradient(0deg, white, lightgray);
    background-color: lightgray;
}

Если я уберу градиентную линию, тогда весь фон изменится на lightgray, как я и ожидал, а не тот «случайный серый», который был там раньше.

Итак, как можно сделать одно из следующих действий:

1. Расширение градиента на все окно (когда содержимое не достигает дна) или
2. Наличие конечного цвета градиента «продолжить за» конец, чтобы заполнить остальную часть видимой области.

Обе сработали бы для меня, но я в тупике.

Answer 1

Странно, как вы говорите, цвет фона занимает всю высоту окна, а градиент фона - нет.

Странно, но есть способ / хак, если вы можете указать от min-height до body.

body {
    margin: 0;
    background: linear-gradient(0deg, white, lightgray) no-repeat;
    background-color: lightgray;
    min-height: 100vh;
}

Примечание: у нас есть min-height, поэтому не имеет значения, даже если содержимое превышает высоту окна или если содержимого нет, оно работает в обоих направлениях.

Обновление:

1vh = 1% высоты области просмотра.

vh - это единица измерения CSS.

Это в основном работает с высотой окна просмотра. Поэтому нам нужно, чтобы body занимал всю высоту области просмотра независимо от количества содержимого внутри тела.

То есть 100vh = 100% высоты области просмотра.

Для получения дополнительной информации о Viewport следуйте this .

Поддержка: Относительно модулей просмотра окна Поддержка кросс-браузеров. Вы можете перейти по этой ссылке .

Надеюсь, это поможет вам.

Answer 2

Оказывается, код, который вы ввели, был почти там. Вы будете смеяться, когда увидите, что это за изменение.

body {
    background: linear-gradient(180deg, white, lightgray) no-repeat;
    background-color: lightgray;
}

Я только что добавил "no-repeat" в свойство background. Градиент исчезает от верха содержимого к низу, а затем заменяется одним сплошным.

Вот фрагмент, показывающий его использование:

"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);

function onWindowLoaded(evt) {
    doDraw();
}

function doDraw() {
    var can = byId('output');
    var ctx = can.getContext('2d');
    ctx.translate(0.5, 0.5);
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, can.width,can.height);
    ctx.strokeStyle = '#d9d9d9';
    
    ctx.beginPath();

    for (var y = 0; y < can.height; y += 16) {
        ctx.moveTo(0, y);
        ctx.lineTo(can.width, y);
    }
    
    for (var x = 0; x < can.width; x += 16) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, can.height);
    }

    ctx.stroke();
}

body {
    background: linear-gradient(180deg, white, lightgray) no-repeat;
    background-color: lightgray;
}

<canvas id='output' width='241' height='225' />