My CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-family: 'Roboto', sans-serif;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%; /* 707.38px */
width: 100%;
background-image: url('../_img/bg.jpg');
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
/*overflow: hidden;
overflow: auto;*/
}
.conteudo {
height: 72%;
width: 60%;
background-color: rgba(0,0,0,0.9);
text-align: center;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
border-radius: 7px;
}
#login {
width: 30%;
height: auto;
animation: fadein 1.5s;
}
img.logo {
width: 55%;
}
input {
text-align: center;
font-size: 20px; /* 22px */
padding: 1.8% 1.5%; /* 7px 5px*/
margin: 1.11%; /* 5px */
border-radius: 5px;
background-color: #343535;
border: 1px solid #fff;
color: #fff;
}
input.login {
width: 75%;
}
button {
font-size: 20px; /* 22px */
padding: 2.222222222222222% 1.111111111111111%; /* 10px 5px */
margin: 3.5%; /* 10px */
background-color: #2679ac;
color: white;
border-radius: 7px;
cursor: pointer;
}
button.login {
width: 27%;
}
button:hover {
background-color: #195070;
transition-duration: 0.5s;
}
@media screen and (max-width: 480px){
#login {
width: 35%;
}
}
Meu HTML:<!DOCTYPE html>
<html>
<head>
<title>True Work</title>
<link rel="stylesheet" type="text/css" href="_css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="loader" class="loader"></div>
<div id="login" class="conteudo">
<img class="logo" src="https://www.twpro.solutions/_img/logo.png"alt="Logotipo">
<form method="POST" action="_classes/valida_login.php">
<input type="text" name="usuario" placeholder="Usuario" class="login" required="">
<input type="password" name="senha" placeholder="Senha" class="login" required="">
<button type="submit" class="login">Entrar</button>
</form>
</div>
</body>
</html>Good afternoon,
I've been searching in several places and none of the solutions helped me, my question is this: I have a login page, it contains a centralized div with Height: auto and only this, setting the Body to Height: 100% , this simply does has no effect.
Ps .: I tested without the div (empty body), and it worked perfectly, only in the presence of div that has no effects. It may seem like a basic beginner problem, but I'm banging my head for a few days and I really did not get any of the solutions that introduced me.
Testsite: link