Я использую радиальный градиент в качестве фона на моей веб-странице, например:
background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));
Это работает, но когда содержимое не заполняет всю страницу, градиент отключается. Как я могу сделать элемент <body> заполнять всю страницу, всегда?
html, body {
margin: 0;
height: 100%;
}
На нашем сайте у нас есть страницы, где содержимое статично, и страницы, на которых он загружен с помощью AJAX. На одной странице (странице поиска) были случаи, когда результаты AJAX были бы больше, чем заполнять страницу, и случаи, когда они не вернули никаких результатов. Чтобы фоновое изображение заполнило страницу во всех случаях, нам пришлось применить следующий CSS:
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
height для html и min-height для body.
Поскольку ни один из других ответов не работал у меня, я решил опубликовать это как ответ для других, которые искали решение, которое также обнаружило ту же проблему. Как 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;
}
Когда у меня высота html (или html и body), установленная на 100%,
html {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
}
Мне пришлось применить 100% к html и телу.
Попробуйте использовать единицы измерения вида (vh, vm) на уровне тела
html, body {margin: 0; заполнение: 0; } body {min-height: 100vh; }
Используйте vh-единицы для горизонтальных полей, paddings и границ на теле и вычитайте их из значения min-height.
У меня были причудливые результаты с использованием vh, vm единиц на элементах тела, особенно при повторной калибровке.