Mengisi Ruang Skrin yang Selebihnya dengan Div Kandungan dalam HTML

Mengisi Ruang Skrin yang Selebihnya dengan Div Kandungan dalam HTML
Mengisi Ruang Skrin yang Selebihnya dengan Div Kandungan dalam HTML
Jules David
Selasa, 16 Julai 2024 6:36:39 PTG

Mengoptimumkan Reka Letak untuk Kandungan Ketinggian Penuh

Mewujudkan aplikasi web yang menggunakan keseluruhan ruang skrin secara berkesan adalah cabaran biasa. Memastikan kandungan memenuhi ketinggian keseluruhan skrin, terutamanya apabila terdapat pengepala dinamik, memerlukan perancangan dan pelaksanaan yang teliti. Pengepala selalunya mengandungi elemen penting seperti logo dan maklumat akaun, dan ketinggiannya boleh berbeza-beza.

Matlamatnya adalah untuk menjadikan div kandungan menduduki ruang skrin yang tinggal tanpa bergantung pada jadual. Ini boleh menjadi rumit, terutamanya apabila elemen dalam div kandungan perlu menyesuaikan diri dengan ketinggian peratusan. Artikel ini meneroka cara untuk mencapai reka letak ini menggunakan teknik CSS moden.

Perintah Penerangan
flex-direction: column; Tetapkan paksi utama bekas flex menjadi menegak, menyusun kanak-kanak dari atas ke bawah.
flex: 1; Membenarkan item flex berkembang dan memenuhi ruang yang tersedia dalam bekas flex.
grid-template-rows: auto 1fr; Mentakrifkan susun atur grid dengan dua baris, di mana baris pertama mempunyai ketinggian automatik dan baris kedua menggunakan ruang yang tinggal.
overflow: auto; Membolehkan penatalan jika kandungan melimpahi bekas, menambah bar skrol mengikut keperluan.
height: 100vh; Menetapkan ketinggian elemen kepada 100% daripada ketinggian viewport.
grid-template-rows Menentukan saiz setiap baris dalam susun atur grid.
display: flex; Mentakrifkan bekas flex, membolehkan model susun atur flexbox untuk anak-anaknya.

Menggunakan Teknik Reka Letak CSS Moden

Dalam skrip pertama, kami gunakan Flexbox untuk membuat a div mengisi ruang skrin yang tinggal. The container kelas ditetapkan kepada display: flex dan flex-direction: column. Ini menyusun pengepala dan kandungan secara menegak. Pengepala mempunyai ketinggian tetap, manakala kandungan menggunakan flex: 1 untuk mengisi ruang yang tinggal. Pendekatan ini memastikan div kandungan menyesuaikan secara dinamik untuk menduduki mana-mana ketinggian yang tinggal, tanpa mengira ketinggian pengepala. The overflow: auto harta membolehkan div kandungan boleh ditatal jika kandungan melebihi kawasan boleh dilihat, mengekalkan reka letak yang bersih tanpa masalah limpahan.

Dalam skrip kedua, CSS Grid digunakan untuk susun atur. The container kelas ditetapkan kepada display: grid dengan grid-template-rows: auto 1fr. Ini mencipta grid dengan dua baris: baris pertama (pengepala) melaraskan ketinggiannya secara automatik dan baris kedua (kandungan) mengisi ruang yang tinggal. Sama seperti contoh Flexbox, div kandungan mempunyai overflow: auto harta untuk mengendalikan kandungan limpahan dengan anggun. Kedua-dua kaedah menghapuskan keperluan untuk jadual, memanfaatkan teknik susun atur CSS moden untuk mencapai reka bentuk yang fleksibel dan responsif yang menyesuaikan dengan ketinggian pengepala yang berbeza-beza dan memastikan kandungan memenuhi seluruh halaman.

Menggunakan Flexbox untuk Membuat Baki Ruang Skrin Isi Div

HTML dan CSS menggunakan Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      flex: 1;
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

Menggunakan Grid CSS untuk Mengisi Ruang Skrin yang Selebihnya

HTML dan CSS menggunakan Tata Letak Grid

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

Teknik Lanjutan untuk Reka Letak Kandungan Tinggi Penuh

Satu lagi kaedah yang berkesan untuk memastikan a div mengisi ruang skrin yang tinggal menggunakan Viewport Height (vh) unit dalam kombinasi dengan Calc(). The vh unit mewakili peratusan ketinggian port pandangan, menjadikannya berguna untuk reka bentuk responsif. Dengan menetapkan ketinggian div kandungan kepada calc(100vh - [header height]), anda boleh melaraskan ketinggian secara dinamik berdasarkan ketinggian pengepala. Pendekatan ini berfungsi dengan baik untuk pengepala dengan ketinggian tetap atau diketahui, memastikan div kandungan sentiasa memenuhi ruang yang tinggal. Selain itu, menggunakan vh unit membantu mengekalkan tingkah laku susun atur yang konsisten merentas saiz skrin yang berbeza.

Untuk susun atur yang lebih kompleks, JavaScript boleh digunakan untuk mengira dan melaraskan ketinggian elemen secara dinamik. Dengan melampirkan pendengar acara pada acara ubah saiz tetingkap, anda boleh mengira semula ketinggian div kandungan apabila saiz tetingkap berubah. Kaedah ini memberikan fleksibiliti yang lebih besar dan boleh mengendalikan ketinggian pengepala yang berbeza-beza dan kandungan dinamik. Menggabungkan JavaScript dengan CSS memastikan reka letak anda kekal responsif dan boleh disesuaikan dengan saiz skrin dan perubahan kandungan yang berbeza, menawarkan penyelesaian yang mantap untuk div kandungan tinggi penuh dalam aplikasi web.

Soalan Lazim dan Penyelesaian untuk Reka Letak Kandungan Tinggi Penuh

  1. Bagaimanakah saya boleh menggunakan fungsi calc() untuk ketinggian dinamik?
  2. The calc() fungsi membolehkan anda melakukan pengiraan untuk menentukan nilai sifat CSS, seperti height: calc(100vh - 50px) untuk mengambil kira pengepala 50px.
  3. Apakah unit vh dalam CSS?
  4. The vh unit bermaksud ketinggian viewport, di mana 1vh sama dengan 1% daripada ketinggian viewport, menjadikannya berguna untuk reka bentuk responsif.
  5. Bagaimanakah saya mengendalikan ketinggian pengepala dinamik?
  6. Gunakan JavaScript untuk mengukur ketinggian pengepala dan laraskan ketinggian div kandungan dengan sewajarnya, memastikan ia mengisi ruang yang tinggal secara dinamik.
  7. Bolehkah Flexbox dan Grid digabungkan?
  8. Ya, anda boleh menggabungkan Flexbox dan Grid susun atur dalam projek yang sama untuk memanfaatkan kekuatan mereka untuk keperluan susun atur yang berbeza.
  9. Bagaimanakah saya memastikan kebolehscrollan dalam div kandungan?
  10. Tetapkan div kandungan overflow harta kepada auto untuk menambah bar skrol apabila kandungan melebihi ketinggian div.
  11. Apakah faedah menggunakan JavaScript untuk pelarasan reka letak?
  12. JavaScript menyediakan pelarasan masa nyata dan fleksibiliti untuk mengendalikan kandungan dinamik dan saiz elemen yang berbeza-beza, meningkatkan tindak balas reka letak.
  13. Adakah mungkin untuk mengelak daripada menggunakan jadual untuk susun atur?
  14. Ya, teknik susun atur CSS moden seperti Flexbox dan Grid menawarkan penyelesaian yang lebih fleksibel dan responsif daripada reka letak berasaskan jadual tradisional.
  15. Bagaimanakah saya boleh membuat div mengisi ketinggian yang tinggal menggunakan Grid CSS?
  16. Tetapkan bekas grid kepada grid-template-rows: auto 1fr, dengan baris kedua (kandungan) ditetapkan kepada 1fr untuk mengisi ketinggian yang tinggal.
  17. Apakah peranan yang dimainkan oleh unit 100vh dalam susun atur ketinggian penuh?
  18. The 100vh unit mewakili ketinggian penuh port pandangan, membenarkan elemen untuk skala responsif berdasarkan saiz port pandangan.
  19. Bolehkah saya menggunakan ketinggian min untuk susun atur responsif?
  20. Ya, menggunakan min-height memastikan elemen mengekalkan ketinggian minimum, yang boleh membantu mengurus limpahan kandungan dan mengekalkan ketekalan reka letak.

Teknik Susun Atur Bungkus

Dengan memanfaatkan teknik CSS moden seperti Flexbox dan Grid, pembangun web boleh membuat reka letak dengan berkesan di mana div kandungan mengisi ruang skrin yang tinggal, memastikan responsif dan kebolehsuaian. Kaedah ini menghapuskan keperluan untuk susun atur berasaskan jadual yang lapuk dan memberikan lebih fleksibiliti dalam reka bentuk.

Menggabungkan unit CSS seperti vh dan fungsi seperti calc() dengan JavaScript untuk pelarasan dinamik boleh meningkatkan lagi tindak balas reka letak. Ini memastikan pengalaman pengguna yang lancar merentas peranti dan saiz skrin yang berbeza, menjadikan aplikasi web lebih mantap dan mesra pengguna.