Блог

Главная - Вопросы по программированию - CSS Grid — шаблон сетки не расширяется на всю высоту

CSS Grid — шаблон сетки не расширяется на всю высоту

#css #css-grid

#css #css-grid

Вопрос:

Я использую CSS-Grid и добавляю некоторый пример содержимого внутри основного раздела, я не знаю, почему содержимое внутри основного или бокового разделов не расширяется на всю высоту. Как вы можете видеть во фрагменте кода. Я определил тело, HTML и контейнер с height: 100vh помощью или с помощью 100% .

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100vh;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100vh;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
   
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

Комментарии:

1. переполнение: авто; в основной?

Ответ №1:

Если вам просто нужны полностью адаптивные столбцы, ваш код можно упростить таким образом:

 .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.container * {
  padding: 10px;
}

nav {
  height: 5rem;
  grid-column-start: 1;
  grid-column-end: 4;
  background: green;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  background: gold;
}

main {
  grid-column-start: 2;
  grid-column-end: 4;
  background: skyblue;
} 
 <div class="container">
  <nav>navigation bar</nav>
  <div class="sidebar">sidebar</div>
  <main>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
  </main>
</div>

Ответ №2:

Вы также можете обратиться height:100vh к min-height:100vh to .container и удалить height из .sidebar и main и, в конечном итоге, из html и body тоже, поскольку .container заполнит сам экран

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

   

.container {
    min-height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  } 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

Ответ №3:

Вам нужно отредактировать два класса.

Главная и боковая панель с height: 100%

А также не забудьте очистить кеш.

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100%;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100%;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  } 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

Надеюсь, это будет полезно.