Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?-tutorial css-php.cn

Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?

Mary-Kate Olsen

Lepaskan： 2024-12-09 00:20:10

asal

970 orang telah melayarinya

How to Make a Div Element Always Occupy the Full Screen?

Cara Mengekalkan
Skrin Penuh Tanpa mengira Saiz Kandungan

Masalah:

Adakah ia boleh dilakukan untuk membuat

elemen menduduki seluruh skrin tanpa mengira kandungan yang terkandung di dalamnya?

Penyelesaian:

Pendekatan CSS berikut secara konsisten mencapai kesan yang diingini:

<head>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    #wrapper {
      min-height: 100%; /* This ensures the `#wrapper` is at least as tall as the viewport */
    }
  </style>
</head>

<body>
  <div>

Salin selepas log masuk

Penyelesaian ini adalah mudah dan serasi merentas pelayar. Ia melibatkan penetapan empat atribut CSS:

tinggi: 100% untuk dan elemen memastikan ia memenuhi seluruh skrin secara menegak.
margin: 0 untuk dan elemen mengalih keluar sebarang jidar lalai atau padding yang boleh menjejaskan kesan skrin penuh.
ketinggian min: 100% untuk elemen #wrapper memastikan ia sentiasa sekurang-kurangnya setinggi port pandangan, walaupun kandungannya adalah lebih pendek. Ini menghalang kandungan daripada dipangkas atau boleh ditatal.

Atas ialah kandungan terperinci Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Bagaimana Membuat Elemen Div Sentiasa Menduduki Skrin Penuh?

Cara Mengekalkan Skrin Penuh Tanpa mengira Saiz Kandungan

Cara Mengekalkan
Skrin Penuh Tanpa mengira Saiz Kandungan