How do DIV fill 100% of the display?

Asked

Viewed 3,179 times

4

Good afternoon

I would like to create a site where the height of the first DIV is 100% of the display displayed to the user, and when giving the scroll, the other elements appear normally. I know you have a way to calculate this using jquery or javascript. Someone knows how I do it?

javascript html jquery css

  • do not want a menu, yes all div occupy the display

  • 1

    The best way to do this is by using css itself

4 answers

7

You can use the style height: 100vh;, which gives the element the total height of the viewport (visible window area):

Example:

body{
   margin: 0;
}

#primeira{
   background-color: yellow;
   height: 100vh;
}
<div id="primeira">
   Primeira div
</div>
<div>
   Segunda div
</div>
<div>
   Terceira div
</div>

Using height: 100%

So that the div be the same height as viewport using percentage (%), it is necessary to define the html and the body in 100%.

html, body{
   margin: 0;
   height: 100%;
}

#primeira{
   background-color: yellow;
   height: 100%;
}
<div id="primeira">
   Primeira div
</div>
<div>
   Segunda div
</div>
<div>
   Terceira div
</div>

Using Javascript

You can use the window.innerHeight to catch the height of viewport and assign to the height of the first div. Example:

var el = document.body.querySelector("#primeira");

function altura(){
   el.style.height = window.innerHeight+"px";
}

document.addEventListener("DOMContentLoaded", altura);
window.addEventListener("resize", altura);
body{
   margin: 0;
}

#primeira{
   background-color: yellow;
}
<div id="primeira">
   Primeira div
</div>
<div>
   Segunda div
</div>
<div>
   Terceira div
</div>

In jQuery would be:

$(window).on("load resize", function(){
   $("#primeira").css("height",window.innerHeight+"px");
});
body{
   margin: 0;
}

#primeira{
   background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primeira">
   Primeira div
</div>
<div>
   Segunda div
</div>
<div>
   Terceira div
</div>

  • Thanks, it helped a lot, I just wanted to know if it has to go decreasing along as I reduce the window. At the moment it just adapts.

  • Vc says in the case of javascript?

0

Utilize $(window).resize(); see that the <DIV> is adjusted by modifying the screen size.

$(window).on("load resize", function(){
   $("#primeira").css("height",window.innerHeight+"px");
});
$(window).resize(function() {
   var calHeight = $(window).height()*0.798;
   $('#primeira').fullCalendar('option', 'height', calHeight);
});
body{
   margin: 0;
}

#primeira{
   background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primeira">
   Primeira div
</div>
<div>
   Segunda div
</div>
<div>
   Terceira div
</div>

Good luck!

0

1 - Defining the tags html and body with height:100%;

html, body {
  height: 100%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
}
div.foo {
  width: 100%;
  height: 100%;
  background: rgb(220, 50, 50);
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="foo">
		Tela completa
	</div>
	<div>
		Abaixo da tela completa
	</div>
</body>
</html>

2 - Defining position: absolute; for the tag body:

body {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
}
div.foo {
  width: 100%;
  height: 100%;
  background: rgb(220, 50, 50);
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="foo">
		Tela completa
	</div>
	<div>
		Abaixo da tela completa
	</div>
</body>
</html>

How can I make a div 100% of window height?

0

Opacity is a bonus :)

*{
	margin:0;
	padding:0;
}
#suadiv{
	position:absolute;
	top:0;
	left:0;
	z-index:11;
	background-color:#0000ff;
	width:100%;
	height:100%;
	opacity: .50;
	filter: alpha(opacity=65);
}
<div id="suadiv"> </div>

Browser other questions tagged javascript html jquery css

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