php - 使用线性渐变 css html 时背景屏幕拆分

Question

嗨，我们正在做一个 uni 元素。我的设计有问题。我们必须根据客户的要求使用线性渐变。它在普通页面上工作正常，但是当我在使用“将数据提交到表格中的表单”的页面中使用它时，屏幕分成多个部分。有时在 2 有时更多。

这是问题图片 the problem screenshot

它应该看起来不像其他页面的背景

像这样should be like this image

这是我的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>

我真的被这个问题困扰了很久。这里有什么问题？

Answer 1

因为你的 body 没有拉伸(stretch)到全高。

它一直延伸到“返回管理”按钮为止。

添加这个应该可以得到你想要的。

html,
body {
  min-height: 100%;
}

https://codepen.io/jacobgoh101/pen/mENqNE