Jak ustawić <div> zawsze na pełnym ekranie?

170

Bez względu na to, jaka jest jego zawartość.

Czy da się to zrobić?

html css responsive Maska
źródło
2
Jest tu wiele świetnych odpowiedzi, ale nie widzę żadnej wzmianki o flexboksie, więc pomyślałem, że podzielę się tymi 2 centami: Posiadanie tego rodzica div w 100% to jedno, ale jeśli nadejdzie czas, zorganizuj i wyśrodkuj część zawartości w tym div, przyjrzyj się flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox
ArleyM

Odpowiedzi:

146

To zawsze działa dla mnie:

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

To chyba najprostsze rozwiązanie tego problemu. Wystarczy ustawić cztery atrybuty CSS (chociaż jeden z nich ma tylko uszczęśliwić IE).

Adam Harte
źródło
1
@AdamHarte Dlaczego to nie działa, jeśli usuniesz selektor „html” z CSS? → ciało {wzrost: 100%; margines: 0; }
Alex Prut,
2
@ P.Alex Math! Jeśli wysokość znaczników HTML rozciąga się, aby dopasować się do ich zawartości, wówczas wysokość ciała jest równa 100% jego elementu nadrzędnego, to nie będziesz zmuszać go do wykorzystania 100% dostępnego miejsca.
Adam Harte
1
Właśnie wypróbowałem to w wpf używając cefsharp chromium i działa :)
adminSoftDK
106

To jest moje rozwiązanie do tworzenia pełnoekranowego div przy użyciu czystego css. Wyświetla pełnoekranowy element div, który jest trwały podczas przewijania. A jeśli zawartość strony mieści się na ekranie, na stronie nie będzie widoczny pasek przewijania.

Przetestowano w 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>
Rozwiń fragment

Mihai Cicu
źródło
58

Jest to najbardziej stabilny (i łatwy) sposób na zrobienie tego i działa we wszystkich nowoczesnych przeglądarkach:

.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>
Rozwiń fragment

Przetestowano do pracy w Firefox, Chrome, Opera, Vivaldi, IE7 + (na podstawie emulacji w IE11).

groza
źródło
1
To działa lepiej, jeśli użyć następujących: position: fixed; top: 0; left: 0;a teraz część, która jest inna width: 100%; height: 100%;. W rzeczywistości działa to również bezbłędnie w starszych przeglądarkach.
Aart den Braber
1
Dlaczego lepiej jest używać szerokości i wysokości niż używać dołu i prawej strony? Jeśli używasz szerokości i wysokości, a także chcesz trochę dopełnienia i / lub obramowania, musisz również upewnić się, że masz box-sizing: border-box;, w przeciwnym razie otrzymasz większe pole, które spowoduje przewijanie. Zobacz to .
awe
31

Najlepszym sposobem na to w nowoczesnych przeglądarkach byłoby skorzystanie z długości wyświetlanych w procentach , cofając się do zwykłych wartości procentowych dla przeglądarek, które nie obsługują tych jednostek .

Długości wyrażone w procentach rzutni są oparte na długości samej rzutni. Dwie jednostki, których tutaj użyjemy, to vh(wysokość rzutni) i vw(szerokość rzutni). 100vhjest równa 100% wysokości rzutni i 100vwrówna się 100% szerokości rzutni.

Zakładając następujący HTML:

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

Możesz użyć następujących:

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;
}

Oto demo JSFiddle, które pokazuje divelement wypełniający zarówno wysokość, jak i szerokość ramki wynikowej . Jeśli zmienisz rozmiar ramki divwynikowej, rozmiar elementu odpowiednio się zmieni.

James Donnelly
źródło
18

Nie mam IE Josha, czy mógłbyś to dla mnie przetestować. Dzięki.

<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
źródło
nie musisz ustawiać szerokości na 100%
Adam Harte
Nie rozumiem; na stałe wpisujesz wysokość 800px na DIV. OP chce, aby było to dynamiczne.
Josh Stodola
Och, przepraszam, nie widziałem tego skradającego się absolutnego tam (lub u góry / po lewej). W takim razie w porządku :)
Adam Harte
Na marginesie, możesz użyć position: fixedzamiast tego, jeśli strona może się przewijać, ale pamiętaj, że nie działa w niektórych przeglądarkach mobilnych. Caniuse.com/#feat=css-fixed
luiges90
1
Słyszałem, że są bardziej nowoczesne sposoby rozwiązania tego problemu. @Tubbe Czy wiesz, czy to prawda?
bzlm
8

Co znalazłem najlepszy elegancki sposób, jest jak poniżej, najbardziej Trick tutaj jest dokonanie divS” 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>
Rozwiń fragment

Demo maski

Jeff Tian
źródło
8

Zmień bodyelement na a, flex containera divna a flex item:

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

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

Mori
źródło
8

Oto najkrótsze rozwiązanie oparte na vh. Należy pamiętać, że vhnie jest to obsługiwane w niektórych starszych przeglądarkach .

CSS:

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

HTML:

<div>This div is fullscreen :)</div>
olieidel
źródło
1
Jest to wygodne, ale ma problemy w przeglądarkach mobilnych: css-tricks.com/the-trick-to-viewport-units-on-mobile
Alexander Kim
Po co komplikować sprawy? Działa to w przeglądarkach mobilnych DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 i Chrome 81.0.4044.138, a także na komputerach stacjonarnych; Brave 1.10.97, Chrome 83.0.4103.116 i Safari 12.1.2.
Jakob
1

To jest sztuczka, której używam. Dobre dla responsywnych projektów. Działa doskonale, gdy użytkownik próbuje zepsuć zmianę rozmiaru przeglądarki.

<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
źródło
-8

Niestety heightwłaściwość w CSS nie jest tak niezawodna, jak powinna. Dlatego JavaScript będzie musiał być użyty do ustawienia stylu wysokości danego elementu na wysokość okna użytkownika. I tak, można to zrobić bez pozycjonowania bezwzględnego ...

<!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
źródło
1
Jeśli używasz biblioteki takiej jak jQuery (zalecane), $(window).height();najlepszym pomysłem byłoby pobranie wysokości za pośrednictwem .
Josh Stodola
Czy istnieje czyste rozwiązanie CSS?
Maska
@Mask Nie, nie ma. W każdym razie jeszcze nie.
Josh Stodola
@Jed A może spróbujesz zastosować wartość min-height: 100% i wypróbuj ją w Mac-Safari, a może znajdziemy tutaj rozwiązanie. Myślę, że byłoby to lepsze niż kłótnie o platformy.
Josh Stodola
3
Działa to w IE7, Chrome3, Safari4 i Opera10. Wszystko przetestowane w systemie Windows. Wadą jest to, że używa javascript, czego Maska chciał uniknąć (zobacz jego komentarz do tej odpowiedzi). Odpowiedź TandemAdama to czysty CSS i działa na wszystkich przeglądarkach, które testowałem, z wyjątkiem Opery.
awe