How do I open a DIV that occupies all the internal space of the browser?

Navigation
0

How can I open a DIV that only occupies the internal space of the browser where the sites are displayed?

    
asked by anonymous 22.11.2016 / 17:36

3 answers

3

If you need only open but do not occupy the whole page screen, just the 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>

If you need to open it but do not occupy the entire page, but still block the visibility of the content: 

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>

The problem of vm and vh is that they need the browser to support these properties and only the most modern browsers support IE9 not support for example ( link ), so you can use position: relative; in the largest element (note that if the div is in a small element with position: relative; will affect functionality) 

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

It's possible to use true fullscreen with 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>
    
01.12.2016 / 12:02
1

Use CSS for this, take advantage of what the browser has to offer by default:

A div: 

<div class="minhaDiv"></div>

Your Css: 

.minhaDiv {
  position: absolute;
  width: 100vw;
  height: 100vh;
  padding: 0;
}
    
23.11.2016 / 20:06
0

Good afternoon, my friend, you can do this: 

<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
    
22.11.2016 / 18:57
Upload content from another file with jquery Capture which unique key was violated