你好，我们正在做一个项目。我对这个设计有点意见。我们必须使用线性梯度作为客户端的要求。它在正常页面上工作得很好，但是当我在使用"表单向表提交数据"的页面中使用它时，屏幕分裂成多个部分。有时在2有时更多。
这里是问题图像问题截图
它应该看起来不像其他页面的背景
像这样的应该像这样的图像
这是我的css代码@charset "utf-8";
/* CSS Document */
body,ol,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,fieldset,legend,input,textarea,select{background-color:none; list-style:none; margin:0; padding:0;}
body {background:linear-gradient(to bottom, #86090F 0%, #EA3C22 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); font-family:Roboto,sans-serif; font-weight:300;}
a{display:block; text-decoration:none;}
a:hover{text-decoration:none;}
img{border:none; vertical-align:middle;}
.clear{overflow:hidden; display:block; height:0; font-size:0; line-height:0; clear:both;}
.fl{float:left;width:100%;}
.fr{float:right;width:100%;}
.logout{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
width: 6%;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #63513D;
border: none;
border-radius: 15px;
float:left;
margin-top: 15px;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 15px;
width: 15%;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #63513D;
background-color: #D6D2C2;
border: none;
border-radius: 15px;
margin-top: 15px;
}
.button:hover {background-color: #EAE8E0;}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.container{
width:70%;
margin:0 auto;
font-size: 150%;
}
header{
width:100%;
margin:0 auto;
height:85px;
border-bottom:2px solid #404040;
background-color:rgb(245, 242, 228);
}
b
.img{
width:150px;
border-right:1px solid #333;
height:85px;
margin-left:2%;
}
.content1{ width:50%;
height:20%;
font-size: 20px;
text-align: left;
margin:0 auto;
}
.content1 h3{
font: blone 14px Arial;
text-align:center;
margin-left:5px;
}
.content1 table{
width:100%;
border-bottom:1px solid #999;
border-right:1px solid #999;
border-left:none;
border-top:none;
margin-top:10px;
margin-left:5px;
background-color: rgb(245, 242, 228);
}
.content1 table td{
width:200px;
text-align:left;
border-left:1px solid #999;
border-top:1px solid #999;
border-right:none;
border-bottom:none;
height:25px;
font: 20px Impact, Arial;
line-height: 95%;
}
.content1 table tr{
border:none;
}
.box{
width:1050px;
margin:0 auto;
margin-top:15px;
}
.content2{
width:490px;
float:left;
}
.content2 h3{
font:blone 14px Arial;
text-align: center;
}
.lyb_box{
width:100%;
margin-top:15px;
height:400px;
border:1px solid #000;
margin-left:1px;
background-color: rgb(245, 242, 228);
}
.lyb_box_nr{
float:left;
width:90%;
margin-top:20px;
}
.lyb_box_nr p{
font:normal 14px Arial;
float:left;
width:100%;
margin-left:7px;
}
.lyb_box_nr input{
width:100%;
float:left;
margin-left:10px;
height:30px;
border:1px solid #CCC;
}
.lyb_box_nr select{
width:100%;
float:left;
margin-left:20px;
height:30px;
border:1px solid #CCC;
}
article{
width:40%;
border:2px solid #404040;
float:right;
}
.search{
float:left;
width:150px;
border-radius:3px;
margin-top:20px;
color:#000;
text-align:center;
height:25px;
margin-left:330px;
}
.content3{
float:right;
width:500px;
height:400px;
border:1px solid #404040;
margin-top:31px;
}
.content4{
float:center;
width:500px;
height:400px;
border:1px solid #404040;
margin-left:700px;
}
#nav{
color: red;
text-align: center;
text-transform: uppercase;
line-height: 2.8;
word-spacing: 10px;
width: 80%;
margin: -50px auto;
height: 46px;
border-radius: 8px;
border: 1px solid #cbcbcb;
border-bottom: 4px solid #adadad;
margin-right:0px;
}
#nav a{
display: block;
width: 30%;
height: 46px;
line-height: 40px;
float: left;
border-bottom: 4px solid #adadad;
text-align: center;
text-decoration: none;
color: black;
}
#nav a:active{
color:green;
background-color: white;
}
#nav a:hover{
border-bottom: 4px solid red;
color: red;
}
footer{
clear: both;
font-weight: bold;
font-size: 25px;
color: #86090F;
margin: 0 px auto;
position: absolute;
bottom: 0px;
width: 100%;
background-color:#2D251A
}
#footer a:hover{text-decoration:underline;background-color:withe;}
#footer a, #footer a:visited {color:#fff; text-decoration:none;}
#legal {background-color:white; clear:both; list-style-type:none; overflow:hidden; padding:20px 120px 20px 24px;}
li.first {padding-left:45%;}
li:not(#flag) {float:left; padding-right:25px;list-style-type:none;}
#k{
padding-left:40%;
width:500px;
height:400px;
border:0 px solid #404040;
margin-top:-10px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<? include("header.html"); ?>
</head>
<body>
<h4><?php echo $e; ?><h4>
<div>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<section class="content1">
<table border="1">
<tr>
<td>
<label>
User Name</label>
</td>
<td>
<input type="text" name="username" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Password</label>
</td>
<td>
<input type="text" name="password" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Name</label>
</td>
<td>
<input type="text" name="name" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Email</label>
</td>
<td>
<input type="text" name="email" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Campus</label>
</td>
<td>
<input type="text" name="campus" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
</label>
</td>
<td>
<input name="submit" type="submit" value="Submit" />
</td>
</tr>
</table>
</section>
</form>
<div clear="both"></div>
<a href="index.php" class="button">Back to management</a><br/>
</body>
</html>这是因为你的身体没有伸展到全高。
它只延伸到'Back to Management'按钮。
加上这个应该会得到你想要的。
html,
body {
min-height: 100%;
}