Обмен технологиями

[Изучение css2] макет сетки — нижняя часть страницы сохраняется внизу веб-страницы.

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Как сохранить нижний колонтитул страницы в нижнем колонтитуле (внизу) страницы, когда высота среднего содержимого недостаточно высока, чтобы высота экрана могла поддерживать страницу.

1. Сначала посмотрите на эффект отображения на рисунке выше.

2. Предоставьте исходный код

2.1, HTML-часть

  1. <body>
  2.   <header>头部</header>
  3.   <main>主区域</main>
  4.   <footer>底部</footer>
  5. </body>

2.2, CSS-часть

  1. <style>
  2.     html, body {
  3.       margin: 0;
  4.       padding: 0;
  5.       width: 100%;
  6.       height: 100%;
  7.     }
  8.     body {
  9.       min-height: 100vh;
  10.       display: grid;
  11.       grid-template-rows: auto 1fr auto;
  12.     }
  13.  
  14.     header {
  15.       background: aquamarine;
  16.       height: 40px;
  17.       line-height: 40px;
  18.       text-align: center;
  19.     }
  20.  
  21.     footer {
  22.       background: aquamarine;
  23.       height: 50px;
  24.       line-height: 50px;
  25.       text-align: center;
  26.     }
  27.  
  28.     main {
  29.       margin: 0 auto;
  30.       background: aqua;
  31.       width: 80%;
  32.     }
  33.   </style>

3. Все коды

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>gridbox布局</title>
  6.   <style>
  7.     html, body {
  8.       margin: 0;
  9.       padding: 0;
  10.       width: 100%;
  11.       height: 100%;
  12.     }
  13.     body {
  14.       min-height: 100vh;
  15.       display: grid;
  16.       grid-template-rows: auto 1fr auto;
  17.     }
  18.  
  19.     header {
  20.       background: aquamarine;
  21.       height: 40px;
  22.       line-height: 40px;
  23.       text-align: center;
  24.     }
  25.  
  26.     footer {
  27.       background: aquamarine;
  28.       height: 50px;
  29.       line-height: 50px;
  30.       text-align: center;
  31.     }
  32.  
  33.     main {
  34.       margin: 0 auto;
  35.       background: aqua;
  36.       width: 80%;
  37.     }
  38.   </style>
  39. </head>
  40. <body>
  41.   <header>头部</header>
  42.   <main>主区域</main>
  43.   <footer>底部</footer>
  44. </body>
  45. </html>

4. Принцип

1. Зарезервированоmin-height: 100vhэтот метод, но затем мы используемgrid-template-rowsДавай космос.

2. Хитрость этого метода заключается в использовании специальных ячеек сетки.fr 。 fr Представляет «копии», и для его использования требуется, чтобы браузер вычислил доступные «копии» оставшегося пространства для выделения этому столбцу или строке. В этом случае он заполняет все доступное пространство между хедером и футером, что также решает «недостаток» подхода flexbox, при котором основная область не может быть заполнена автоматически.

Личный профиль

Он посвятил себя исследованию технологий более 30 лет и владеет различными языками, такими как Java, Linux, Javascript, php, css и т. д. Он внес большой вклад в область открытого исходного кода. Станция документации для разработчиков, где можно поделиться некоторыми проблемами в разработке технологий для дальнейшего использования. Все ознакомьтесь.

моя контактная информация

Почта