Bagaimana untuk membuat ketinggian tag div sama dengan ketinggian tetingkap penyemak imbas menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk membuat ketinggian tag div sama dengan ketinggian tetingkap penyemak imbas menggunakan CSS?

Apabila bekerja pada projek pembangunan web, selalunya terdapat senario di mana anda perlu memberikan teg div ketinggian penuh tetingkap penyemak imbas Ini amat berguna apabila membuat reka letak halaman penuh, bahagian wira atau elemen yang diperlukan untuk merentangi keseluruhan ruang menegak.

Walau bagaimanapun, untuk mencapai kesan yang diingini ini menggunakan CSS boleh menjadi agak sukar kerana sifat Model Kotak CSS dan kelakuan lalai sifat ketinggian.

Dalam artikel ini, kami akan meneroka teknik yang berbeza untuk menetapkan ketinggian tetingkap penyemak imbas 100% kepada teg div menggunakan CSS. Kami akan membincangkan pelbagai kaedah CSS dan menyediakan contoh kod praktikal untuk setiap teknik.

Ketinggian Penggunaan: 100%

Satu pendekatan untuk memberikan ketinggian 100% tag div adalah dengan menggunakan ketinggian: 100% sifat Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pendekatan ini datang dengan cabaran dan batasan tertentu.

Dengan menetapkan ketinggian: 100% pada elemen div, anda mengarahkannya untuk mengambil 100% ketinggian elemen induk. Pendekatan ini berfungsi dengan baik apabila elemen induk mempunyai ketinggian tetap yang ditakrifkan secara eksplisit dalam CSS. Walau bagaimanapun, apabila ia datang kepada tetingkap penyemak imbas itu sendiri, elemen html dan badan (elemen induk tag div) tidak mempunyai ketinggian tetap secara lalai.

Untuk membolehkan tag div mengisi keseluruhan ketinggian tetingkap penyemak imbas, anda perlu memastikan ketinggian elemen induk (html dan badan) ialah 100%. Anda boleh mencapai ini dengan menggunakan CSS berikut

<!DOCTYPE html>
<html>
<head>
   <style>
      html, body {
         height: 100%;
         margin: 0;
         padding: 0;
      }   
      .container {
         height: 100%;
         background-color: lightgray;
         display: flex;
         align-items: center;
         justify-content: center;
      }   
      .content {
         width: 300px;
         height: 200px;
         background-color: white;
         border: 1px solid gray;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Setelah ketinggian elemen induk ditetapkan kepada 100%, ketinggian tetapan: 100% pada teg div sasaran akan menyebabkan ia berkembang untuk memenuhi keseluruhan ketinggian tetingkap penyemak imbas.

Namun, terdapat beberapa perkara yang perlu dipertimbangkan apabila menggunakan kaedah ini −

Skrol− Jika kandungan di dalam div melebihi ketinggian tetingkap penyemak imbas, bar skrol akan muncul untuk membolehkan kandungan ditatal.
Elemen Bersarang − Jika tag div bersarang dalam elemen lain dengan ketinggian berasaskan peratusan, anda perlu memastikan bahawa semua elemen induk mempunyai ketinggian 100% untuk pendekatan berfungsi dengan betul.
Keserasian − Versi lama Internet Explorer (IE) mungkin tidak menyokong ketinggian: 100% pendekatan dengan betul, jadi adalah penting untuk menguji pelaksanaan anda merentas pelayar yang berbeza.

Walaupun ketinggian: 100% pendekatan boleh menjadi penyelesaian mudah dalam sesetengah kes, ia mempunyai hadnya dan mungkin memerlukan pertimbangan tambahan. Dalam beberapa bahagian seterusnya, kami akan meneroka teknologi alternatif yang memberikan lebih fleksibiliti dan sokongan penyemak imbas yang lebih baik.

Teknik 1: Menggunakan Ketinggian: 100vh

Satu lagi teknik untuk menetapkan ketinggian tag div kepada 100% daripada tetingkap penyemak imbas adalah dengan menggunakan atribut ketinggian: 100vh. Unit vh mewakili peratusan ketinggian viewport.

Dengan menetapkan ketinggian: 100vh pada elemen div, anda mengarahkannya untuk mengambil 100% ketinggian port pandangan, tanpa mengira elemen induknya Pendekatan ini menyediakan penyelesaian yang lebih mudah tanpa perlu menetapkan elemen induk. ketinggian secara eksplisit.

Contoh

Berikut ialah coretan kod lengkap yang menunjukkan teknik ini -

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         height: 100vh;
         background-color: lightgray;
         display: flex;
         align-items: center;
         justify-content: center;
      }   
      .content {
         width: 300px;
         height: 200px;
         background-color: white;
         border: 1px solid gray;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Dalam coretan kod ini, kami mempunyai struktur HTML yang serupa seperti sebelumnya, div induk dengan "bekas" kelas dan div sasaran dengan "kandungan" kelas. Gunakan gaya CSS untuk mencapai kesan yang diingini.

Perbezaan utama ialah kami menetapkan ketinggian: 100vh pada kelas "bekas". Ini menyebabkan div kontena berkembang ke ketinggian penuh port pandangan. Div "kandungan" dalaman mewarisi ketinggian dan juga akan meregangkan untuk mengisi keseluruhan ketinggian port pandangan.

Dengan menggunakan pendekatan ketinggian: 100vh, anda boleh mencapai div ketinggian penuh dengan mudah tanpa menetapkan ketinggian unsur induk secara eksplisit.

Petua 2: Gunakan Flexbox

Flexbox ialah modul reka letak CSS berkuasa yang menyediakan cara yang fleksibel untuk mengedar dan menjajarkan elemen dalam bekas. Ia juga boleh digunakan untuk mencapai ketinggian 100% tag div.

Dengan menggunakan sifat Flexbox, kami boleh mencipta bekas yang mengembang untuk mengisi ruang menegak yang tersedia Berikut adalah coretan kod lengkap yang menunjukkan teknik ini −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: flex;
         flex-direction: column;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         flex-grow: 1;
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

In this code snippet, we have a parent div element with a class of "container" and a child div with a class of "content". The CSS styles are applied to utilize Flexbox for achieving 100% height.

通过在 "container" 类上设置 display: flex，我们创建了一个 Flexbox 容器。添加 flex-direction: column 可以确保子元素垂直堆叠。height: 100vh 属性使容器扩展以填充整个视口的高度。

To make the "content" div take up the remaining vertical space, we set flex-grow: 1. This instructs the "content" element to grow and fill the available space within the Flexbox container.

技巧3：使用CSS Grid

CSS Grid is another powerful layout module that allows you to create complex grid-based layouts with ease. It can also be leveraged to achieve 100% height for a div tag.

By utilizing CSS Grid, we can create a grid container that expands to fill the available vertical space. Here's a complete code snippet that demonstrates this technique −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: grid;
         grid-template-rows: 1fr;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

In this code snippet, we have a parent div element with a class of "container" and a child div with a class of "content". The CSS styles are applied to utilize CSS Grid for achieving 100% height.

By setting display: grid on the "container" class, we create a CSS Grid container. The grid-template-rows: 1fr property sets the row template to 1fr, which means the available space is distributed evenly among the rows. This ensures that the "content" div takes up the full height of the container.

The height: 100vh property makes the container expand to fill the full height of the viewport.

技巧4：使用绝对定位

Another technique to give a div tag 100% height of the browser window is by using absolute positioning. By positioning the div element absolutely and setting its top, bottom, left, and right properties to 0, we can make it expand to fill the entire height of the viewport.

Example

这是一个完整的示例代码片段，演示了这个技术 −

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         position: relative;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

在这段代码片段中，我们有一个class为"container"的父div元素和一个class为"content"的子div元素。CSS样式被应用以利用绝对定位来实现100%的高度。

通过在"container"类上设置position: relative，我们为子div建立了一个定位上下文。这使我们能够将"content" div绝对定位相对于其父元素。

属性 top: 0, bottom: 0, left: 0 和 right: 0 将 "content" div 定位在其父元素的顶部、底部、左侧和右侧边缘。这将导致它拉伸并填充容器的整个高度。

Technique 5: 使用 Flexbox 和 Overflow

在某些情况下，您可能会遇到内容超过视口高度的情况。在这种情况下，您可以使用Flexbox和overflow属性的组合，以确保div保持100%的高度，同时允许溢出内容滚动。

示例

Here's a complete running example snippet that demonstrates this technique −

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: flex;
         flex-direction: column;
         height: 100vh;
         background-color: lightgray;
      }   
      .content {
         flex-grow: 1;
         background-color: white;
         border: 1px solid gray;
         margin: 20px;
         overflow: auto;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="content">
         <!-- Content goes here -->
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

In this code snippet, we have a parent div element with a class of "container" and a child div with a class of "content". The CSS styles are applied to utilize Flexbox and handle overflow.

Similar to Technique 2, we set display: flex on the "container" class to create a Flexbox container. The flex-direction: column property ensures that the child elements are stacked vertically.

通过在“content”类上设置flex-grow: 1，div会扩展以占据容器中剩余的垂直空间。此外，如果内容超过div的高度，我们使用overflow: auto来启用内容的垂直滚动。

Conclusion

Achieving a 100% height for a

tag in CSS can be accomplished using various techniques. By utilizing CSS properties like height: 100vh, Flexbox, CSS Grid, and absolute positioning, we can create responsive layouts that fill the entire height of the browser window.

Each technique offers its advantages and may be more suitable depending on the specific requirements of your project. It's important to consider factors such as content overflow and browser compatibility when choosing the appropriate approach.

通过理解和实施这些技术，您可以确保您的

标签根据视口高度动态适应，提供无缝且视觉上吸引人的用户体验。尝试这些方法并选择最适合您需求的方法

Atas ialah kandungan terperinci Bagaimana untuk membuat ketinggian tag div sama dengan ketinggian tetingkap penyemak imbas menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!