html and body with height of 100%

Question

html and body with height of 100%

Navigation

#1 by (1 votes)

0

Well, good morning!

I'm using flexbox, and I saw that to center some div on the screen, div in the case created inside the body, to align with align-items and justify-content (using the two with the value center, will center horizontal and vertical) only works if I leave the html and body tags with 100% height.

By default, are these tags tall? Because wide it has 100% looks like.

.flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.form-group{
display: flex;
flex-direction: column;
}

<!DOCTYPE html>
<html>
<head>
	<title>Site Lucas de Carvalho Alves</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="container-fluid flex-box">
	<div class="title-panel">
		<h1>Bem vindo!</h1>
	</div>
	<div class="box-dados">
		<form class="form-box-dados" method="POST" action="" name="teste">
		  <div class="form-group">
		    <label for="email">Endereço de e-mail</label>
		    <input type="email" class="form-control" id="email" placeholder="Email" name="email">
		  <div class="form-group">
		    <label for="senha">Senha</label>
		    <input type="password" class="form-control" id="senha" placeholder="Password" name="senha">
		  </div>
		  <button class="btn btn-success button-box-dados">Entrar</button>
		</form>
	</div>
</div>

<script type="text/javascript" src="../_cdn/jquery.js"></script>
</body>
</html>

In the above code, you can check that it only centers horizontally, not vertical, because the html and body are with default height, the only solution is putting the html and height 100%? Or is there some other solution?

css3 flexbox

asked by anonymous 11.12.2017 / 11:20

1 answer

Save the value of a variable abroad and then import it into Batch How do I save the largest value in rowCount?

score 1 · Accepted Answer

Yes, the solution can be put height: 100%; to html, body , as this is not a flex condition but rather a HTML5 DOCTYPE condition, formerly HTML4 or < strong> DOCTYPE Transitional did not need to take the height by default as occupying the viewport or content, but the DOCTYPE Strict (also html4) needed height: 100%; and this was taken to HTML5 (which only has a DOCTYPE).

In this response I explain in more detail the behavior of DOCTYPE:

Placing 100% height Iframe

I think you should apply to .container-fluid too, like this:

 html, body, .container-fluid {
    height: 100%;
 }

.flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.form-group{
    display: flex;
    flex-direction: column;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<div class="container-fluid flex-box">
    <div class="title-panel">
        <h1>Bem vindo!</h1>
    </div>
    <div class="box-dados">
        <form class="form-box-dados" method="POST" action="" name="teste">
          <div class="form-group">
            <label for="email">Endereço de e-mail</label>
            <input type="email" class="form-control" id="email" placeholder="Email" name="email">
          <div class="form-group">
            <label for="senha">Senha</label>
            <input type="password" class="form-control" id="senha" placeholder="Password" name="senha">
          </div>
          <button class="btn btn-success button-box-dados">Entrar</button>
        </form>
    </div>
</div>