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

Asked

Viewed 193 times

2

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

javascript

  • A height: 100%; and width: 100%; do not solve ?

  • Use in CSS: width: 100vw; height: 100vh. It will pick up 100% of the width and height of the screen. More information here: CSS-Tricks - Viewport.

3 answers

4

If you need to just open but not occupy the entire page screen, just 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 only open but not occupy the entire page screen, 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, IE10 does not support for example (http://caniuse.com/#feat=viewport-Units), then you can use position: relative; in the largest element (note that if div is in a small element with position: relative; will affect the 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 is possible to use real 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>

2

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

The div:

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

Your Css:

.minhaDiv {
  position: absolute;
  width: 100vw;
  height: 100vh;
  padding: 0;
}

1

You can do it like this:

<div id="teste"></div>

In 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

Browser other questions tagged javascript

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