Wie erstelle ich ein <div> immer im Vollbildmodus?

170

Egal wie der Inhalt ist.

Ist das möglich?

html css responsive Maske
quelle

2

Es gibt hier viele gute Antworten, aber ich sehe keine Erwähnung von Flexbox, also dachte ich, ich würde diese 2 Cent teilen: Es ist eine Sache, dass dieses übergeordnete Div 100% ist, aber wenn die Zeit dafür gekommen ist, arrangieren Sie es Wenn Sie einige Inhalte in diesem Bereich zentrieren, sollten Sie sich die Flexbox ansehen. css-tricks.com/snippets/css/a-guide-to-flexbox

ArleyM

146

Das funktioniert bei mir immer:

<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 dazu dient, den IE glücklich zu machen).

Adam Harte
quelle

1

@AdamHarte Warum funktioniert es nicht, wenn Sie den HTML-Selektor aus dem CSS entfernen? → Körper {Größe: 100%; Rand: 0; }

Alex Prut

2

@ P.Alex Math! Wenn sich die Höhe Ihrer HTML-Tags entsprechend ihrem Inhalt ausdehnt, beträgt die Körpergröße 100% der übergeordneten Größe, und Sie werden sie nicht auf 100% des verfügbaren Speicherplatzes zwingen.

Adam Harte

1

Ich habe es gerade in wpf mit cefsharp chrom versucht und es funktioniert :)

adminSoftDK

106

Dies ist meine Lösung, um ein Vollbild-Div mit reinem CSS zu erstellen. Es wird ein Vollbild-Div angezeigt, das beim Scrollen dauerhaft bleibt. Und wenn der Seiteninhalt auf den Bildschirm passt, wird auf der Seite keine Bildlaufleiste angezeigt.

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>

Erweitern Sie das Snippet

Mihai Cicu
quelle

58

Dies ist die stabilste (und einfachste) Methode 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>

Erweitern Sie das Snippet

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

Scheu
quelle

1

Es funktioniert besser, wenn Sie Folgendes verwenden: position: fixed; top: 0; left: 0;und jetzt den Teil, der anders ist : width: 100%; height: 100%;. Dies funktioniert auch in älteren Browsern einwandfrei.

Aart den Braber

1

Warum ist es besser, Breite und Höhe zu verwenden als unten und rechts? Wenn Sie Breite und Höhe verwenden und auch eine Polsterung und / oder einen Rand wünschen, müssen Sie auch sicherstellen, dass Sie diese haben box-sizing: border-box;. Andernfalls erhalten Sie ein größeres Feld, das zum Scrollen führt. Sehen Sie das .

Ehrfurcht

31

Der beste Weg, dies mit modernen Browsern zu tun, besteht darin, die prozentualen Längen des Ansichtsfensters zu verwenden und für Browser, die diese Einheiten nicht unterstützen , auf die regulären prozentualen Längen zurückzugreifen .

Die prozentualen Längen des Ansichtsfensters basieren auf der Länge des Ansichtsfensters. Die beiden Einheiten, die wir hier verwenden werden, sind vh(Ansichtsfensterhöhe) und vw(Ansichtsfensterbreite). 100vhentspricht 100% der Höhe des Ansichtsfensters und 100vw100% der Breite des Ansichtsfensters.

Angenommen, der folgende HTML-Code:

<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, in der das divElement 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 divElements entsprechend geändert.

James Donnelly
quelle

18

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>

Tubbe
quelle

Sie müssen die Breite nicht auf 100% einstellen

Adam Harte

Ich verstehe es nicht; Sie codieren eine Höhe von 800px auf dem DIV fest. Das OP möchte, dass dies dynamisch ist.

Josh Stodola

Oh, tut mir leid, ich habe nicht gesehen, dass ich mich dort absolut eingeschlichen habe (oder oben / links). Na dann ist es gut :)

Adam Harte

Als Randnotiz möchten Sie vielleicht position: fixedstattdessen verwenden, wenn die Seite scrollen kann, aber beachten Sie, dass es in einigen mobilen Browsern nicht funktioniert caniuse.com/#feat=css-fixed

luiges90

1

Ich habe gehört, dass es modernere Möglichkeiten gibt, dies zu lösen. @Tubbe weißt du ob das stimmt?

Bzlm

8

Was ich die beste elegante Art und Weise gefunden , wie die folgenden, hier die meisten Trick ist , die machen div‚s position: fixed.

.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>

Erweitern Sie das Snippet

Jeff Tian
quelle

8

Ändern Sie das bodyElement in a flex containerund das divin a flex item:

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

div {
  flex: 1;
  background: tan;
}

<div></div>

Erweitern Sie das Snippet

Mori
quelle

8

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

CSS:

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

HTML:

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

olieidel
quelle

1

Es ist praktisch, hat aber Probleme in mobilen Browsern: css-tricks.com/the-trick-to-viewport-units-on-mobile

Alexander Kim

Warum komplizieren? Dies erledigt die Arbeit in mobilen Browsern wie DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 und Chrome 81.0.4044.138 sowie auf dem Desktop. Brave 1.10.97, Chrome 83.0.4103.116 und Safari 12.1.2.

Jakob vor

1

Dies ist der Trick, den ich benutze. Gut für reaktionsschnelle Designs. Funktioniert perfekt, wenn der Benutzer versucht, die Größe des Browsers 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>

Shardul
quelle

-8

Leider ist die heightEigenschaft in CSS nicht so zuverlässig, wie sie sein sollte. Daher muss Javascript verwendet werden, um den Höhenstil des betreffenden Elements auf die Höhe des Ansichtsfensters des Benutzers festzulegen. Und ja, das geht ohne absolute Positionierung ...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

Josh Stodola
quelle

1

Wenn Sie eine Bibliothek wie jQuery verwenden (empfohlen), ist es $(window).height();am besten , die Höhe über zu ermitteln.

Josh Stodola

Gibt es eine reine CSS-Lösung?

Maske

@Mask Nein, gibt es nicht. Noch nicht.

Josh Stodola

@Jed Wie wäre es, wenn Sie versuchen, eine Mindesthöhe anzuwenden: 100% und es in Mac-Safari versuchen, und vielleicht können wir hier eine Lösung finden. Ich denke, das wäre besser, als über Plattformen zu streiten.

Josh Stodola

3

Dies funktioniert in IE7, Chrome3 und Safari4 und Opera10. Alles unter Windows getestet. Nachteil ist, dass Javascript verwendet wird, was Mask vermeiden wollte (siehe seinen Kommentar zu dieser Antwort). Die Antwort von TandemAdam ist reines CSS und funktioniert mit allen von mir getesteten Browsern außer Opera.

Ehrfurcht

Wie erstelle ich ein <div> immer im Vollbildmodus?

Antworten: