html背景自定义颜色不覆盖整个页面
[英]html background custom color not cover the whole page
问题描述
I am trying to have this custom color cover the whole page but it's only covering part of it.
我试图让这种自定义颜色覆盖整个页面，但它只覆盖其中的一部分。 I have the same issues with other pages which has a similar layout.我对具有类似布局的其他页面也有同样的问题。 I know that I need to move my styling to a CSS file but for now, I am just testing things out.我知道我需要将我的样式移动到一个 CSS 文件，但现在，我只是在测试。 I looked at other solutions but have not found the one that helped me yet.我查看了其他解决方案，但还没有找到对我有帮助的解决方案。 maybe cause I am using thymeleaf, not sure!!!!也许是因为我用的是百里香，不确定！！！！
**and here is my HTML code ** **这是我的HTML代码**
<!DOCTYPE html>
<html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>VoiceIt App</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.navbar {
background-color: black;
}
#multi-color-bg {
width: 100%;
height: 400px;
background-image: url(firefox.png),
url(bubbles.png),
linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208));
background-repeat: no-repeat,
no-repeat,
no-repeat;
background-position: bottom right,
left,
right;
}
</style>
<body id="multi-color-bg">
<!-- create navigation bar ( header) -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" th:href="@{/register}">Registration and
Login</a>
</div>
</div>
</nav>
<br><br><br><br><br><br><br>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>User Login Page</h1>
<form th:action="@{/login}" method="post">
<!-- error message -->
<div th:if="${param.error}">
<div class="alert alert-danger">Invalid username or
password.</div>
</div>
<!-- logout message -->
<div th:if="${param.logout}">
<div class="alert alert-info">You have been logged out.</div>
</div>
<div class="form-group">
<label for="username"> Username </label> : <input type="text"
class="form-control" id="username" name="username"
placeholder="Enter Email ID" autofocus="autofocus">
</div>
<div class="form-group">
<label for="password">Password</label>: <input type="password"
id="password" name="password" class="form-control"
placeholder="Enter Password" />
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit"
class="form-control btn btn-primary" value="Log In" />
</div>
</div>
</div>
</form>
<div class="form-group">
<span>New user? <a href="/" th:href="@{/register}">Register
here</a></span>
</div>
</div>
</div>
</div>
</body>
</html>
5 个解决方案
解决方案1
1 已采纳 2022-06-08 01:54:53
you can try to set the height 100% and css html { height: 100% }您可以尝试设置高度100%和 css html { height: 100% }
html, body{
height: 100%;
}
解决方案2
1 2022-06-08 05:24:28
In this case, you will need to adjust the height of the body tag given in the custom #multi-color-bg id rules that you added to your HTML.在这种情况下，您需要调整添加到 HTML 中的自定义#multi-color-bg id 规则中给定的 body 标记的高度。 Adding a 100% to it will do the trick, although I'd recommend to use a separated div as a wrapper for all the content of the body and leave the body apart with only the rule of 100vh to the body tag.添加 100% 就可以了，尽管我建议使用单独的 div 作为正文所有内容的包装器，并将正文分开，只有 100vh 规则到正文标记。 This is of course optional, just an extra suggestion, pal.这当然是可选的，只是一个额外的建议，朋友。
.navbar { background-color: black; } #multi-color-bg { width: 100%; height: 100%; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } <!DOCTYPE html> <html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>VoiceIt App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <body id="multi-color-bg"> <!-- create navigation bar ( header) --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" th:href="@{/register}">Registration and Login</a> </div> </div> </nav> <br><br><br><br><br><br><br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>User Login Page</h1> <form th:action="@{/login}" method="post"> <!-- error message --> <div th:if="${param.error}"> <div class="alert alert-danger">Invalid username or password. </div> </div> <!-- logout message --> <div th:if="${param.logout}"> <div class="alert alert-info">You have been logged out.</div> </div> <div class="form-group"> <label for="username"> Username </label> : <input type="text" class="form-control" id="username" name="username" placeholder="Enter Email ID" autofocus="autofocus"> </div> <div class="form-group"> <label for="password">Password</label>: <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" /> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-primary" value="Log In" /> </div> </div> </div> </form> <div class="form-group"> <span>New user? <a href="/" th:href="@{/register}">Register here</a></span> </div> </div> </div> </div> </body> </html>
解决方案3
0 2022-06-08 02:13:47
Setting height to 100% is still not working try to set height to 100vh.将高度设置为 100% 仍然不起作用尝试将高度设置为 100vh。 And if it still not work add margin-top of required pixel.如果它仍然不起作用，请添加所需像素的边距顶部。 I hope this solved the problem.我希望这解决了这个问题。
解决方案4
0 2022-06-08 05:29:52
In this case, you will need to adjust the height of the body tag given in the custom #multi-color-bg id rules that you added to your HTML.在这种情况下，您需要调整添加到 HTML 中的自定义#multi-color-bg id 规则中给定的 body 标记的高度。 Adding a 100vh to it will do the trick, although I'd recommend to use a separated div as a wrapper for all the content of the body and leave the body apart with only the rule of 100vh to the body tag.添加一个 100vh就可以了，尽管我建议使用一个单独的 div 作为正文的所有内容的包装器，并将正文分开，只有 100vh 的规则到正文标记。 This is of course optional, just an extra suggestion, pal.这当然是可选的，只是一个额外的建议，朋友。
.navbar { background-color: black; } #multi-color-bg { width: 100%; height: 100vh !important; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; }
<!DOCTYPE html> <html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>VoiceIt App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <body id="multi-color-bg"> <!-- create navigation bar ( header) --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" th:href="@{/register}">Registration and Login</a> </div> </div> </nav> <br><br><br><br><br><br><br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>User Login Page</h1> <form th:action="@{/login}" method="post"> <!-- error message --> <div th:if="${param.error}"> <div class="alert alert-danger">Invalid username or password. </div> </div> <!-- logout message --> <div th:if="${param.logout}"> <div class="alert alert-info">You have been logged out.</div> </div> <div class="form-group"> <label for="username"> Username </label> : <input type="text" class="form-control" id="username" name="username" placeholder="Enter Email ID" autofocus="autofocus"> </div> <div class="form-group"> <label for="password">Password</label>: <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" /> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-primary" value="Log In" /> </div> </div> </div> </form> <div class="form-group"> <span>New user? <a href="/" th:href="@{/register}">Register here</a></span> </div> </div> </div> </div> </body> </html>
解决方案5
0 2022-06-08 05:33:30
actually the height of body is not full page and the background is applied on body.实际上body的高度不是整页，背景是应用在 body 上的。 so you should keep body at least 100vh high所以你应该保持body至少100vh高
body{
min-height: 100vh;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.