Заставить HTML <body> заполнить все вертикальное пространство с помощью Bootstrap и Rails?
Я пытаюсь заполнить фон моей веб-страницы рельсов градиентом, который выглядит следующим образом:
.gradient {
background: #43cea2;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
}
Градиент работает отлично, однако содержимое тела не заполняет все вертикальное пространство экрана, поэтому фон градиента обрезается на полпути вниз по странице.
Я уже ссылался на другие сообщения о переполнении стека, такие как Вот этот, но ни один из этих ответов, похоже, не помог.
Добавление этих строк в мой application.scss, похоже, вообще не имеет никакого эффекта:
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
Любая помощь будет принята с благодарностью!
Ответы 2
Установите для тела высота значение 100%, а не min-height, а затем установите для вашего элемента .gradient высоту 100%.
См. ниже
html {
height: 100%;
}
body {
height: 100%;
}
.gradient {
height: 100%; /*If you're placeing this class on the body then remove this as it is redundent*/
background: #43cea2;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
}<div class = "gradient"></div>Однако более простым методом было бы установить для элемента, в который вы помещаете класс градиента, значение 100vh:
.gradient {
...
height: 100vh
}
Это установит его на 100 высоты окна просмотра (браузера). Вот некоторая информация о единицах просмотра
Похоже, вы на правильном пути.
Вы также можете рассмотреть возможность использования измерений vw и vh, а не измерений %, которые будут плавными для области просмотра, и вам также не нужно явно устанавливать высоту HTML на 100% (что может вызвать проблемы с переполнением в будущем).
Вот некоторая информация об измерениях vh и vw:
https://css-tricks.com/fun-viewport-units/
body {
min-height: 100vh; /* min-height vh can have problems in older IE browsers! */
background: #43cea2;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
}
Чтобы получить простой и немедленный ответ, вы можете обратиться к этому:
Вот рабочий пример, на которую стоит взглянуть и с которой можно повозиться:
https://fiddle.jshell.net/pfk9yvz9/11/
Вот рабочий код:
<!-- HTML -->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Demo</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body class = "gradient">
<p>
<span>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. </span>
<span>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. </span>
<span>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. </span>
</p>
</body>
</html>
style.css (ссылка на <head>)
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
.gradient {
background: #43cea2;
background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
background: linear-gradient(to right, #185a9d, #43cea2);
}
p {
padding: 25px;
margin: 0;
}
p span {
display: block;
margin: 15px 0;
}
Спасибо! Это именно то, что я искал!