Bagaimana cara membuat <div> layar penuh selalu?

170

Tidak peduli bagaimana isinya.

Apakah mungkin melakukan ini?

html css responsive

— Topeng
sumber

2

Ada banyak jawaban bagus di sini, tetapi saya tidak melihat adanya penyebutan flexbox, jadi saya pikir saya akan membagikan 2 sen ini: Memiliki div orangtua menjadi 100% adalah satu hal, tetapi jika tiba saatnya untuk meletakkan, atur , dan pusatkan beberapa konten di div itu, Anda ingin melihat flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

Ini selalu bekerja untuk saya:

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

Ini mungkin solusi paling sederhana untuk masalah ini. Hanya perlu mengatur empat atribut CSS (meskipun salah satunya hanya untuk membuat IE senang).

— Adam Harte
sumber

1

@AdamHarte Mengapa tidak berfungsi jika Anda menghapus pemilih 'html' dari CSS? → tubuh {tinggi: 100%; margin: 0; }

— Alex Prut

2

@ P.Alex Math! Jika tinggi tag HTML Anda membentang agar sesuai dengan kontennya, maka tinggi badannya adalah 100% dari induknya, maka Anda tidak akan memaksakannya hingga 100% dari ruang yang tersedia.

— Adam Harte

1

Saya baru saja mencobanya di WPF menggunakan cefsharp chromium dan berfungsi :)

— adminSoftDK

107

Ini adalah solusi saya untuk membuat div layar penuh, menggunakan css murni. Ini menampilkan layar penuh div yang gigih pada pengguliran. Dan jika konten halaman pas di layar, halaman tidak akan menampilkan bilah gulir.

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

Luaskan cuplikan

— Mihai Cicu
sumber

58

Ini adalah cara paling stabil (dan mudah) untuk melakukannya, dan berfungsi di semua browser modern:

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

Luaskan cuplikan

_{Diuji untuk bekerja di Firefox, Chrome, Opera, Vivaldi, IE7 + (berdasarkan emulasi di IE11).}

— perasaan kagum
sumber

1

Ia bekerja lebih baik jika Anda menggunakan berikut: position: fixed; top: 0; left: 0;dan sekarang bagian yang berbeda: width: 100%; height: 100%;. Ini sebenarnya bekerja di browser lama juga tanpa cacat.

— Aart den Braber

1

Mengapa lebih baik menggunakan lebar dan tinggi daripada menggunakan bagian bawah dan kanan? Jika Anda menggunakan lebar dan tinggi, dan juga ingin beberapa bantalan dan / atau perbatasan, Anda juga perlu memastikan bahwa Anda memiliki box-sizing: border-box;, jika tidak, Anda akan mendapatkan kotak yang lebih besar yang akan menyebabkan pengguliran. Lihat ini .

— awe

31

Cara terbaik untuk melakukan ini dengan browser modern adalah dengan menggunakan Viewport-persentase Panjang , turun kembali ke panjang persentase reguler untuk browser yang tidak mendukung unit tersebut .

Panjang viewport-persentase didasarkan pada panjang viewport itu sendiri. Dua unit yang akan kita gunakan di sini adalah vh(tinggi viewport) dan vw(lebar viewport). 100vhsama dengan 100% dari tinggi viewport, dan 100vwsama dengan 100% dari lebar viewport.

Dengan asumsi HTML berikut:

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

Anda dapat menggunakan yang berikut ini:

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

Berikut ini adalah demo JSFiddle yang menunjukkan divelemen yang mengisi tinggi dan lebar frame hasil. Jika Anda mengubah ukuran frame hasil, divelemen mengubah ukuran sesuai.

— James Donnelly
sumber

18

Saya tidak memiliki IE Josh, dapatkah Anda menguji ini untuk saya. Terima kasih.

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

Anda tidak perlu mengatur lebar menjadi 100%

— Adam Harte

Saya tidak mengerti; Anda sedang mengkodekan ketinggian 800px pada DIV. OP ingin ini dinamis.

— Josh Stodola

Oh maaf, tidak ada yang menyelinap mutlak di sana (atau atas / kiri). Baik itu baik maka :)

— Adam Harte

Sebagai catatan, Anda mungkin ingin menggunakan position: fixedbukan jika halaman dapat menggulir, tapi pikiran Anda bahwa itu tidak bekerja di beberapa browser ponsel caniuse.com/#feat=css-fixed

— luiges90

1

Saya pernah mendengar ada cara yang lebih modern untuk menyelesaikan ini. @ Tubbe, apakah Anda tahu kalau itu benar?

— bzlm

8

Apa yang saya temukan cara yang elegan terbaik adalah seperti berikut ini, yang paling trik di sini adalah membuat 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>

Luaskan cuplikan

— Jeff Tian
sumber

8

Ubah bodyelemen menjadi a flex containerdan divmenjadi flex item:

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

div {
  flex: 1;
  background: tan;
}

<div></div>

Luaskan cuplikan

— Mori
sumber

8

Inilah solusi terpendek, berdasarkan vh. Harap perhatikan bahwa vhtidak didukung di beberapa browser lama .

CSS:

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

HTML:

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

— olieidel
sumber

1

Lebih mudah, tetapi memiliki masalah di browser seluler: css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim

Mengapa memperumit masalah? Ini berfungsi di peramban seluler DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 dan Chrome 81.0.4044.138, serta di Desktop; Berani 1.10.97, Chrome 83.0.4103.116 dan Safari 12.1.2.

— Jakob

1

Ini trik yang saya gunakan. Bagus untuk desain responsif. Bekerja dengan sempurna ketika pengguna mencoba untuk mengacaukan dengan ukuran browser.

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

-8

Sayangnya, heightproperti di CSS tidak dapat diandalkan seperti seharusnya. Oleh karena itu, Javascript harus digunakan untuk mengatur gaya tinggi elemen yang dipertanyakan dengan ketinggian viewport pengguna. Dan ya, ini bisa dilakukan tanpa penentuan posisi absolut ...

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

1

Jika Anda menggunakan perpustakaan seperti jQuery (disarankan), mendapatkan ketinggian melalui $(window).height();akan menjadi ide terbaik.

— Josh Stodola

Apakah ada solusi css murni?

— Topeng

@Mask Tidak, tidak ada. Belum lagi.

— Josh Stodola

@ Jan Bagaimana kalau Anda mencoba menerapkan ketinggian minimum: 100% dan mencobanya di Mac-Safari dan mungkin kita bisa mencapai solusi di sini. Saya pikir itu akan lebih baik daripada berdebat tentang platform.

— Josh Stodola

3

Ini berfungsi di IE7, Chrome3 dan Safari4 dan Opera10. Semua diuji pada Windows. Kekurangannya adalah menggunakan javascript, yang merupakan sesuatu yang ingin dihindari Mask (lihat komentarnya pada jawaban ini). Jawaban TandemAdam adalah CSS murni, dan berfungsi pada semua browser yang saya uji kecuali Opera.

— awe