html and body height 100%

Asked

Viewed 1,047 times

0

You guys, good morning!

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

By default, how high are these tags? Because the width is 100% looks.

.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 see that it only centralizes horizontal, not vertical, because html and body are at standard height, the only solution is to put html and height 100%? Or has some other solution?

css3 flexbox

  • Face by default html seems to have 100% viewport, if you put a bg-color in html vc will see. Already the body seems to have the height of the element that is inside it, and the width of 100%, if you put a bg-color on the body does not appear anything, but if you put a div with 100px height inside the body ai vc will see the color of the background of it. I think if the father doesn’t have height you can’t align the child because there is no reference pro flex work.

1 answer

1


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

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

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>

Browser other questions tagged css3 flexbox

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