Сделать <body> заполнить весь экран?

Я использую радиальный градиент в качестве фона на моей веб-странице, например:

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

Это работает, но когда содержимое не заполняет всю страницу, градиент отключается. Как я могу сделать элемент <body> заполнять всю страницу, всегда?

Ответы

Ответ 1

html, body {
    margin: 0;
    height: 100%;
}

Ответ 2

На нашем сайте у нас есть страницы, где содержимое статично, и страницы, на которых он загружен с помощью AJAX. На одной странице (странице поиска) были случаи, когда результаты AJAX были бы больше, чем заполнять страницу, и случаи, когда они не вернули никаких результатов. Чтобы фоновое изображение заполнило страницу во всех случаях, нам пришлось применить следующий CSS:

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

height для html и min-height для body.

Ответ 3

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

Я нашел Stephen P's comment, чтобы дать правильный ответ на этот вопрос.

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

background filling body height

Когда у меня высота html (или html и body), установленная на 100%,

html {
    height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

background not filling body

Ответ 4

Мне пришлось применить 100% к html и телу.

Ответ 5

Попробуйте использовать единицы измерения вида (vh, vm) на уровне тела

html, body {margin: 0; заполнение: 0; } body {min-height: 100vh; }

Используйте vh-единицы для горизонтальных полей, paddings и границ на теле и вычитайте их из значения min-height.

У меня были причудливые результаты с использованием vh, vm единиц на элементах тела, особенно при повторной калибровке.