I wanted to know how I can get my footer to be just below the content when I zoom in.
You are currently zooming in: link
Zooming out: link
<!DOCTYPE html>
<head>
<title> Home </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/estilocadastro.css">
<link rel="stylesheet" type="text/css" href="CSS/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script></head><body><divid="container">
<div id="top"></div>
<div id="copyrigth">
<a href="#"> Copyrigth - 2016 Todos Direitos Reservados.</a>
</div>
</div>
<div id="cadastro">
<div id="divcadastro">
<form action="Cadastrado.php" method="POST">
<div id="textocadastro">Cadastro</div>
<input type="text" name="nome" placeholder="Nome" class="nome" id="nometeste" style="display:none" >
<input type="text" name="nome" placeholder="Nome" class="nome" id="nometeste" required>
<input type="text" name="sobrenome" placeholder="Sobrenome" class="sobrenome" style="display:none">
<input type="text" name="sobrenome" placeholder="Sobrenome" class="sobrenome" required>
<input type="text" name="login" placeholder="Email" class="login" style="display:none">
<input type="text" name="login" placeholder="Email" class="login" maxlength="40" required>
<input type="password" name="senha" placeholder="Senha" class="senha" style="display:none">
<input type="password" name="senha" placeholder="Senha" class="senha" maxlength="30" required>
<input type="submit" value="Cadastrar" class="botao">
</form>
</div>
</div>
</body>
* {
margin: 0;
padding:0;
}
body, html {
width: 100%;
height: 99%;
font-family: Comic Sans MS, Tahoma, sans-serif;
background: rgba(0,0,0,0.5);
background:url("../Images/WEB-ARTE2.png") fixed no-repeat;
background-size: 100% 100%;
}
register
position: absolute;
top: 70px;
left: 50%;
width: 1343px;
height: 500px;
padding: 20px;
margin-left: -700px; /* por causa do posicionamento absoluto temos que usar margem negativa para centralizar o site */
background: rgba(0,0,0,0.6);
z-index: 5;
box-shadow : 10px 10px 10px rgba(0,0,0,0.5);
}
divcadastro {
height: 500px;
width: 550px;
position: absolute;
top: 50px;
margin-left: 350px;
z-index: 10;
}
.login {
height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 200px;
left: 150px;
border-radius: 3px;
} .login: focus {
border: 1px solid #00FBF6;
}
.save {
height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 250px;
left: 150px;
border-radius: 3px;
}
.senha: focus {
border: 1px solid #FB00F9;
}
.botao{
border: none;
height: 50px;
width: 150px;
position: absolute;
top: 360px;
margin-left: 250px;
background: rgba(0,0,0,0.5);
color: white;
font-weight: bold;
box-shadow: 1px 10px 19px rgba(0,0,0,0.5);
}
.botao:hover{
background: rgba(0,0,0,1);
}
.nome{
height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 100px;
left: 150px;
border-radius: 3px;
}
.nome:focus{
border: 1px solid #00FF00;
}
.sobrenome{
height: 40px;
width: 350px;
border: black solid 1px;
position: absolute;
top: 150px;
left: 150px;
border-radius: 3px;
}
.sobrenome:focus{
border: 1px solid #0105FB;
}
#textocadastro{
height: 200px;
width: 500px;
top: 20px;
font-size: 40px;
left: 70px;
position: absolute;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: rgba(255,255,255,0.7);
}
::-webkit-input-placeholder{
color: rgba(0,0,0,0.5);
font-family: "Comic Sans MS";
position: absolute;
margin-left: 10px;
font-size: 15px;
padding: 5px;
}
#copyrigth{
height: 30px;
width: 100%;
text-align: center;
position:absolute;
bottom: 0;
/*vertical-align: bottom;
display: table-cell;*/
background: rgba(0,0,0,1);
color: white;
min-height: 3%;
font-size: 13px;
padding-top: 10px;
}
#copyrigth a{
text-decoration: none; color: rgba(255,255,255,1);
}
#copyrigth a:hover{ color: rgba(255,255,255,0.5);}
#top{
height: 39px;
width: 100%;
text-align: center;
position: absolute;
margin-bottom: 10px;
background: rgba(0,0,0,1);
overflow-x: hidden;
overflow-y: hidden;
color: white;
min-height: 3%;
padding-top: 7px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}