ein Element in der Webseite bildschirmfüllend machen

Question

Gibt es eine Möglichkeit, ein Element auf der Seite bildschirmfüllend darzustellen?

Zum Beispiel, ein div oder ein img?

Mit "Vollbild" meine ich, dass es den gesamten Platz auf dem Bildschirm des Benutzers einnehmen sollte, so wie wenn wir ein Video mit dem Vollbildmodell ansehen. Ich möchte nicht, dass die Taskleiste/Menüleiste des Browserfensters angezeigt wird.

Irgendeine Idee?

  div.fullscreen{
    display:block;

    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;

    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    background-color:red
  }

Ich habe versucht, den obigen Code, aber es ist nicht das, was ich will, es juse nehmen den ganzen Platz des Browsers Content-Bereich statt des Benutzers Computer-Bildschirm.

Answer 1

HTML-Elemente können die Grenzen des Dokumentfensters des Browsers nicht überschreiten. Das Menü und die Symbolleiste befinden sich außerhalb des Dokumentfensters (das ein Kind des Browserfensters ist), so dass Sie sie nicht "erreichen" können.

Ich denke, die einzige Lösung besteht darin, den Vollbildmodus mit JavaScript auszulösen.

Diese Antwort zeigt, wie Sie das tun können: Wie man das Fenster mit Javascript bildschirmfüllend macht (über den ganzen Bildschirm)

Answer 2

Es gibt eine relativ neue Vollbild-JavaScript-Api die ein Element bildschirmfüllend machen kann.

Sie muss als Ergebnis einer Benutzereingabe aufgerufen werden, um möglichen Missbrauch zu verhindern, aber sie ist relativ einfach zu verwenden:

_{Code aus dem MDN-Artikel:}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

Answer 3

Das ist jetzt nicht möglich und wird es wahrscheinlich auch nie sein.

Stellen Sie sich einmal vor, was passieren würde, wenn jede Website, die Sie besuchen, Ihren Desktop übernehmen könnte.