Como eu posso fazer para abrir uma DIV que ocupe apenas o espaço interno do browser, onde os sites são exibidos?
3 Respostas
Se precisa que apenas abra mas que não ocupe a tela página toda, apenas o view-port:
var exemplo = document.getElementById("exemplo");
var chamar = document.getElementById("chamar");
chamar.onclick = function() {
exemplo.className += " fullviewport";
};
* {
margin: 0;
padding: 0;
}
#exemplo {
background: #ccc;
padding: 10px;
}
.fullviewport {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="exemplo">
Oi
</div>
<button id="chamar">Fullscreen</button>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
Se precisa que apenas abra mas que não ocupe a tela página toda, mas ainda sim bloqueie a visibilidade do conteúdo:
var exemplo = document.getElementById("exemplo");
var chamar = document.getElementById("chamar");
chamar.onclick = function() {
exemplo.className += " fullviewport";
};
* {
margin: 0;
padding: 0;
}
#exemplo {
background: #ccc;
padding: 10px;
}
.fullviewport {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: auto; /*remova se necessário*/
}
<div id="exemplo">
Oi
</div>
<button id="chamar">Fullscreen</button>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
O problema de vm
e vh
é que eles precisam que o navegador suporte estas propriedades e somente os navegadores mais modernos suportam, IE10 não suporta por exemplo (http://caniuse.com/#feat=viewport-units), então você pode usar position: relative;
no maior elemento (note que se o div estiver em um elemento pequeno com position: relative;
irá afetar a funcionalidade)
var exemplo = document.getElementById("exemplo");
var chamar = document.getElementById("chamar");
chamar.onclick = function() {
exemplo.className += " fullviewport";
};
* {
margin: 0;
padding: 0;
}
#exemplo {
background: #ccc;
padding: 10px;
}
.relativo {
position: relative;
}
.fullviewport {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: auto; /*remova se necessário*/
}
<div class="relativo">
<div id="exemplo">
Oi
</div>
<button id="chamar">Fullscreen</button>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
</div>
Fullscreen
É possivel usar fullscreen de verdade com javascript:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#exemplo {
background: #ccc;
padding: 10px;
}
/*por algum motivo usar estas diferentes propriedades no mesmo seletor faz com que não funcione, por isto separei*/
#exemplo:-webkit-full-screen {
width: 100%;
height: 100%;
}
#exemplo:-moz-full-screen {
width: 100%;
height: 100%;
}
#exemplo:-ms-fullscreen {
width: 100%;
height: 100%;
}
#exemplo:fullscreen {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
function inFullscreen()
{
return !(
!document.fullscreenElement &&
!document.mozFullScreenElement &&
!document.webkitFullscreenElement &&
!document.msFullscreenElement
);
}
function exitFullscreenMode()
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
function showInFullscreen(el)
{
if (inFullscreen()) {
exitFullscreenMode();
return;
}
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else {
alert("Seu navegador não suporta");
}
}
</script>
</head>
<body>
<div id="exemplo">
Oi <button id="chamar">Fullscreen</button>
</div>
<script type="text/javascript">
var exemplo = document.getElementById("exemplo");
var chamar = document.getElementById("chamar");
chamar.onclick = function() {
showInFullscreen(exemplo);
};
</script>
</body>
</html>
Utilize o CSS para isso, aproveite o que o browser tem para te oferecer por default:
A div:
<div class="minhaDiv"></div>
Seu Css:
.minhaDiv {
position: absolute;
width: 100vw;
height: 100vh;
padding: 0;
}
Pode fazer assim:
<div id="teste"></div>
No javascript:
var windowWidth = window.innerWidth; //pega a largura da tela
var windowHeight = window.innerHeight; // pega a altura da tela
var div = document.getElementById("teste"); //pega o id da div
div.style.height = windowHeight; //a div ira pegar a altura da tela inteira
div.style.width = windowsWidth; //a div ira pegar a largura da tela inteira
height: 100%;
ewidth: 100%;
não resolvem ?width: 100vw; height: 100vh
. Ele vai pegar 100% da largura e altura da tela. Mais informações aqui: CSS-Tricks - Viewport.