Неровно ложится градиент CSS

Question

Хочу поставить линейный градиент на бэкграунд, но, к сожалению, выходит не то, что хотелось бы. Код прост и краток:

body {
	background-image: linear-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);
}

.header {	
	display: block;
	height: 180px;
}

.content-1 {
	display: block;
	
	float: right;
	width: 50%;
	height: 450px;
}

.content-2 {
	width: 50%;
	display: block;
	
	height: 450px;
}

.footer {
	display: block;
	
	height: 200px;
	width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Index Page</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<span>хедер</span>
		</div>

		<div class="content-1">
			контент1
		</div>

		<div class="content-2">
			контент2
		</div>

		<div class="footer">
			подвал
		</div>
	</div>


</body>
</html>

если просмотреть этот код здесь, то вроде бы всё выглядит нормально(а может не прогрузилось), но у меня на практике всё выглядит так:

Answer 1

Нужно добавить соответствующие префиксы к linear-gradient:

-webkit-smth
-khtml-smth
-moz-smth
-ms-smth
-o-smth
smth

А именно:

background-image: -webkit-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);
background-image: -webkit-linear-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);
background-image: -khtml-linear-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);
background-image: -moz-linear-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);
background-image: -ms-linear-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);
background-image: -o-linear-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);
background-image: linear-gradient(to right bottom, #090979, #0044aa, #0074cf, #00a4ea, #00d4ff);

Дополнительно еще (на основе не совсем верного ответа @Pavel Grishaev) добавить на случай, если контент вашей страницы заполнен меньше, чем на высоту окна:

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

Answer 2

Пропишите в стиль:

html, body {
    height: 100%;
}

Ваш градиент не достаёт до низа документа потому, что сам документ обрывается по высоте содержимого.

И в вашем случае ещё для body нужен margin: 0;

Answer 3

Всем спасибо за помощь, очень признателен за советы и некоторую информацию, учту для себя на будущее. @Sevastopol' отдельное спасибо, твоё решение сработало!

БЛОГ НА HUSL

Неровно ложится градиент CSS

Ответы (3 шт):