Dlaczego nie wyświetla mi diva p2 na całą strone tak jak diva p1?
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Varela+Round&subset=hebrew,latin-ext,vietnamese" rel="stylesheet">
</HEAD>
<BODY>
<div id='p1'>
<div id='content'>
<input type='text' id='genfield'/>
<i class="fas fa-arrow-alt-circle-down fa-3x" style='color:#146EB4;'></i>
<div>
</div>
<div id='p2'>
</div>
</BODY>
<HTML>
I do tego CSS
body {
padding: 0;
margin: 0;
}
#genfield
{
border: 3px solid #00e600;
border-radius:20px;
width:500px;
height:50px;
font-size: 20px;
padding:5px;
outline: none;
font-family: 'Varela Round', sans-serif;
padding-left: 10px;
padding-right: 10px;
}
.cloud_sdownload
{
font-size: 30px;
color: blue;
}
#p1
{
background-color:#FF9900;
width:100%;
height:500px;
}
#p2
{
background-color:#146EB4;
width:100%;
height:500px;
position:absolute;
top:500px;
}
#content
{
position:relative;
left:30%;
top:40%;
display:inline-block;
}