Body with 100% height does not work with auto div height inside

Asked

Viewed 136 times

0

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 have been researching in several places and none of the solutions helped me, my question is the following: I have a login page,it contains a centralized div with Height: auto and only that, but when defining Body as Height: 100%, this simply nay have effects.

Ps.: I tested without the div (empty body), and it worked perfectly, only in the presence of the div that has no effects. It may seem like a basic problem of beginner, but I’m banging my head a few days and I really didn’t get any of the solutions I was presented with

Meu problema: O Body deveria ocupar toda a **página**, e não somente a tela

Testing site: https://www.twpro.solutions/index.php

html css height

  • Young combs use the link to edit just below your question and include your HTML and CSS. But before hand check if your document has this tag right at the beginning <!DOCTYPE html>

  • You want the black box to occupy 100% of the page height is this:?

  • Sorry, I’m new user around here rsrs

  • I don’t understand your problem with the code, I put #login with height: 100% and was normal

  • Actually the problem is not with #login, but with the body, it occupies the whole screen, but on smaller screens (where there is scroll bar) the body does not extend until the end of the page.

  • I get it... but here testing by Chrome Dev Tools it is going all the way, even on very small screens...

  • I just added the print of my problem, I’m sorry if I’m doing something wrong, posting or commenting improperly, never used a forum rsrs

  • This is still normal ... https://imgur.com/a/g5VxLDj

  • puts a float:left; in html and body

  • Marcos: It hasn’t worked yet :/ Hugo: Minimize the screen to show the vertical scroll, the same print is in the question

  • look... https://imgur.com/PP1F21Z

  • Exactly Hugo, but when you scroll down the page, you see that the body does not continue

  • Will your website be accessed by Apple Whatch or some Smart Whatch? If you don’t need to worry, there won’t be user like this screen resolution... Unless your problem is with some code validator error...

  • I’m actually having trouble with Android, when the keyboard goes up, the height of the body goes up together, causing problems with elements positioned with Bottom: 0

  • Hugo: https://imgur.com/a/qmJr3mh; .

  • Any suggestions ?

Show 11 more comments
No answers

Browser other questions tagged html css height

You are not signed in. Login or sign up in order to post.