it-swarm.com.de

Wie erstelle ich ein <div> immer im Vollbildmodus?

Egal wie der Inhalt ist.

Kann man das machen?

132
Mask

Das funktioniert immer bei mir:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

Dies ist wahrscheinlich die einfachste Lösung für dieses Problem. Es müssen nur vier CSS-Attribute festgelegt werden (obwohl eines davon nur stupid IE glücklich machen soll).

128
Adam Harte

Dies ist meine Lösung zum Erstellen eines Vollbild-Divs unter Verwendung von pure css . Es zeigt ein Vollbild-Div an, das beim Scrollen beständig ist ..__ Wenn der Seiteninhalt auf den Bildschirm passt, wird auf der Seite kein Bildlauf angezeigt -Bar.

Getestet in IE9 +, Firefox 13+, Chrome 21+

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

82
Mihai Cicu

Dies ist der stabilste (und einfachste) Weg, dies zu tun, und funktioniert in allen modernen Browsern:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: Lime; /* Just to visualize the extent */
  
}
<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

Getestet für Firefox, Chrome, Opera, Vivaldi, IE7 + (basierend auf Emulation in IE11).

47
awe

Der beste Weg, dies mit modernen Browsern zu tun, wäre die Verwendung von Viewport-Prozentsatzlängen , wobei auf normale Prozentsatzlängen für Browser zurückgegriffen wird, die diese Einheiten nicht unterstützen .

Die prozentuale Länge des Ansichtsfensters basiert auf der Länge des Ansichtsfensters. Die zwei Einheiten, die wir hier verwenden werden, sind vh (Höhe des Ansichtsfensters) und vw (Breite des Ansichtsfensters). 100vh entspricht 100% der Höhe des Ansichtsfensters und 100vw beträgt 100% der Breite des Ansichtsfensters.

Nehmen wir folgendes HTML an:

<body>
    <div></div>
</body>

Sie können Folgendes verwenden:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

Hier ist eine JSFiddle-Demo , die das div-Element zeigt, das sowohl die Höhe als auch die Breite des Ergebnisrahmens ausfüllt. Wenn Sie die Größe des Ergebnisrahmens ändern, wird die Größe des Elements div entsprechend geändert.

27
James Donnelly

Ich habe keinen IE Josh, könnten Sie das bitte für mich testen? Vielen Dank.

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>
18
Tubbe

Was ich am besten gefunden habe, ist wie folgt: Der Trick hier ist, den position: fixed von div zu machen.

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

 The mask demo

8
Jeff Tian

Ändern Sie das body-Element in einen flex container und die div in einen flex item:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}
<div></div>

6
Mori

Dies ist der Trick, den ich benutze. Gut für responsive Designs. Funktioniert perfekt, wenn der Benutzer versucht, die Browsergröße zu ändern.

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>
1
Shardul

Hier ist die kürzeste Lösung, basierend auf vh. Bitte beachten Sie, dass vh in einigen älteren Browsern nicht unterstützt wird.

CSS:

div {
    width: 100%;
    height: 100vh;
}

HTML:

<div>This div is fullscreen :)</div>
0
olieidel