html背景自定义颜色不覆盖整个页面
[英]html background custom color not cover the whole page
问题描述
我试图让这种自定义颜色覆盖整个页面，但它只覆盖其中的一部分。 我对具有类似布局的其他页面也有同样的问题。 我知道我需要将我的样式移动到一个 CSS 文件，但现在，我只是在测试。 我查看了其他解决方案，但还没有找到对我有帮助的解决方案。 也许是因为我用的是百里香，不确定！！！！
**这是我的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
您可以尝试设置高度100%和 css html { height: 100% }
html, body{
height: 100%;
}
解决方案2
1 2022-06-08 05:24:28
在这种情况下，您需要调整添加到 HTML 中的自定义#multi-color-bg id 规则中给定的 body 标记的高度。 添加 100% 就可以了，尽管我建议使用单独的 div 作为正文所有内容的包装器，并将正文分开，只有 100vh 规则到正文标记。 这当然是可选的，只是一个额外的建议，朋友。
.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
将高度设置为 100% 仍然不起作用尝试将高度设置为 100vh。 如果它仍然不起作用，请添加所需像素的边距顶部。 我希望这解决了这个问题。
解决方案4
0 2022-06-08 05:29:52
在这种情况下，您需要调整添加到 HTML 中的自定义#multi-color-bg id 规则中给定的 body 标记的高度。 添加一个 100vh就可以了，尽管我建议使用一个单独的 div 作为正文的所有内容的包装器，并将正文分开，只有 100vh 的规则到正文标记。 这当然是可选的，只是一个额外的建议，朋友。
.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
实际上body的高度不是整页，背景是应用在 body 上的。 所以你应该保持body至少100vh高
body{
min-height: 100vh;
}
CSS 背景色不全，不能正确覆盖整个页面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.