background screen splits when using linear gradient css html - php

Question

Hi we are working on a uni project. i am having a problem with the design. we have to use linear gradient as requirement from the client. it works fine on normal pages but when i use it in a page where i use a "form to submit data into a table" the screen splits into multiple portions. sometimes in 2 sometimes more.
here is the problem image
the problem screenshot
It should be seem less like other pages background
like this should be like this image
Here is my css code
#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>
Back to management<br/>
</body>
</html>
i am really stuck in this problem from a long time. what is wrong here?

Answer 1

it because your body does not stretch to full height.
it stretch until the 'Back to Management' button only.
Adding this should get you what you want.
html,
body {
min-height: 100%;
}
https://codepen.io/jacobgoh101/pen/mENqNE