[Learning css2] διάταξη πλέγματος-το υποσέλιδο τμήμα της σελίδας διατηρείται στο κάτω μέρος της ιστοσελίδας

[Learning css2] διάταξη πλέγματος - το τμήμα υποσέλιδου της σελίδας διατηρείται στο κάτω μέρος της ιστοσελίδας

2024-07-12

Πώς να διατηρήσετε το τμήμα του υποσέλιδου της σελίδας στο υποσέλιδο (κάτω) της σελίδας όταν το ύψος του μεσαίου περιεχομένου δεν είναι αρκετά υψηλό ώστε το ύψος της οθόνης να υποστηρίζει τη σελίδα.

1. Αρχικά, κοιτάξτε το εφέ της οθόνης στην παραπάνω εικόνα.

2. Δώστε τον πηγαίο κώδικα

2.1, μέρος html


<body>
  <header>头部</header>
  <main>主区域</main>
  <footer>底部</footer>
</body>

2.2, μέρος css


<style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    body {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
 
    header {
      background: aquamarine;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
 
    footer {
      background: aquamarine;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
 
    main {
      margin: 0 auto;
      background: aqua;
      width: 80%;
    }
  </style>

3. Όλοι οι κωδικοί


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>gridbox布局</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    body {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }
 
    header {
      background: aquamarine;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
 
    footer {
      background: aquamarine;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
 
    main {
      margin: 0 auto;
      background: aqua;
      width: 80%;
    }
  </style>
</head>
<body>
  <header>头部</header>
  <main>主区域</main>
  <footer>底部</footer>
</body>
</html>

4. Αρχή

1.Δεσμευμένοςmin-height: 100vhαυτή τη μέθοδο, αλλά στη συνέχεια χρησιμοποιούμεgrid-template-rowsΈλα διάστημα.

2. Το κόλπο με αυτήν τη μέθοδο είναι να χρησιμοποιήσετε ειδικά κελιά πλέγματοςfr 。 fr Αντιπροσωπεύει "αντίγραφα" και η χρήση του απαιτεί από το πρόγραμμα περιήγησης να υπολογίσει τα διαθέσιμα "αντίγραφα" του υπολειπόμενου χώρου για να εκχωρήσει σε αυτήν τη στήλη ή τη γραμμή. Σε αυτή την περίπτωση, γεμίζει όλο τον διαθέσιμο χώρο μεταξύ της κεφαλίδας και του υποσέλιδου, γεγονός που λύνει και το «ψεγάδι» της προσέγγισης flexbox, όπου η κύρια περιοχή δεν μπορεί να γεμίσει αυτόματα.

Κοινή χρήση τεχνολογίας