2

Como eu posso fazer para abrir uma DIV que ocupe apenas o espaço interno do browser, onde os sites são exibidos?

2
  • Um height: 100%; e width: 100%; não resolvem ? Commented 22/11/2016 às 16:38
  • Utilize no CSS: width: 100vw; height: 100vh. Ele vai pegar 100% da largura e altura da tela. Mais informações aqui: CSS-Tricks - Viewport. Commented 22/11/2016 às 16:38

3 Respostas 3

4

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>
0
2

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;
}
1

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .