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 I have a way to calculate this using jquery or javascript. Does anyone know how I do this?
You can use the style height: 100vh; , which gives the element the full height of the viewport (visible area of the window):
Example:
body{
margin: 0;
}
#primeira{
background-color: yellow;
height: 100vh;
}<div id="primeira">
Primeira div
</div>
<div>
Segunda div
</div>
<div>
Terceira div
</div>height: 100%
To have div equal the height of the viewport using percentage ( % ), you must set html and body to 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> You can use window.innerHeight to get the height of the viewport and assign to 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><divid="primeira">
Primeira div
</div>
<div>
Segunda div
</div>
<div>
Terceira div
</div>Opacity is 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>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>position: absolute; to 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> Use $(window).resize(); to see that <DIV> is adjusted by modifying 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><divid="primeira">
Primeira div
</div>
<div>
Segunda div
</div>
<div>
Terceira div
</div>Good luck!