Блог

Главная - Вопросы по программированию - Граница контейнера CSS-сетки не прокручивается вдоль

Граница контейнера CSS-сетки не прокручивается вдоль

#css #css-grid

Вопрос:

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 30px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  .grid-container {
    height: 100vh;
    border: 10px solid #14a76c;
    display: grid;
    grid-template-areas:
      "header header header"
      "nav main ads"
      "footer footer footer";      
    grid-template-columns: 1fr 3fr 1fr;
    grid-auto-rows: max-content;
    
  }

  .grid-item {
    background-color: #ccc;
    border: 4px solid #ff652f;
    /* padding: 20px; */
  }

  .item-1 {
    grid-area: header;
  }
  .item-2 {
    grid-area: nav;
  }
  .item-3 {
    grid-area: main;
  }
  .item-4 {
    grid-area: ads;
  }
  .item-5 {
    grid-area: footer;
  } 
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Tutorial</title>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item item-1">item 1</div>
    <div class="grid-item item-2">item 2</div>
    <div class="grid-item item-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus nemo minus itaque rem odit a in ducimus accusantium? Architecto dolorum debitis nihil aliquam, explicabo aspernatur nostrum voluptate, sunt deserunt saepe tempore similique beatae quo iste quisquam eum alias quibusdam aut vitae. Quis, labore aspernatur ipsa tenetur voluptatibus earum cupiditate nihil odit nesciunt illo repellendus id ex eius dolor enim incidunt fugit, voluptate soluta iure placeat repellat error eos. Laboriosam, laudantium. Minima cum dolorem architecto perspiciatis dignissimos nihil exercitationem accusantium id nulla, hic, eos sed? Ipsam natus, ullam quasi harum laudantium quae mollitia omnis aspernatur quo voluptatem rerum aliquid id maiores impedit soluta! Fugit excepturi facilis nesciunt nobis, ab reiciendis, voluptates et quaerat qui nulla voluptate dolorum ipsum quo, officia earum assumenda. Delectus, deleniti porro sunt corporis maiores voluptates nulla harum omnis libero autem qui. Deserunt fugiat perspiciatis, quia quisquam, voluptates atque natus sint velit praesentium vitae unde voluptas nisi fugit dicta suscipit enim accusamus. Maxime pariatur consequatur repellat enim quidem esse, illo, distinctio facere et eius voluptatibus beatae libero, praesentium magnam accusantium omnis numquam! Sed sunt vero ut ad aperiam repellat accusamus quo sint hic quod debitis sequi temporibus autem beatae adipisci aliquid, officiis, a laborum quam tempora ex delectus.</div>
    <div class="grid-item item-4">item 4</div>
    <div class="grid-item item-5">item 5</div>
  </div>
</body>
</html>

Поэтому я нахожу, что граница контейнера сетки отлично адаптируется к изменению размера окна.

изменение размера окна расширяет границу по мере того, как я иду

Моя проблема в том, что когда содержимое слишком велико для одного экрана, и я прокручиваю вниз, чтобы увидеть остальную его часть, граница останавливается на отметке 100 Вч и не расширяется при прокрутке вниз. Создается впечатление, что нижняя граница была перекрыта содержимым.

без границ-снизу

Я хотел, чтобы мой контейнер обернулся вокруг детей и вырос/уменьшился, чтобы обернуть его содержимое.

Ответ №1:

Изменить height: 100vh; на height: 100%; в .grid-container 

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 30px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  .grid-container {
    height: 100%;
      border: 10px solid #14a76c;
    display: grid;
    grid-template-areas:
      "header header header"
      "nav main ads"
      "footer footer footer";      
    grid-template-columns: 1fr 3fr 1fr;
    grid-auto-rows: max-content;
    
  }
  


  .grid-item {
    background-color: #ccc;
    border: 4px solid #ff652f;
    /* padding: 20px; */
  }

  .item-1 {
    grid-area: header;
  }
  .item-2 {
    grid-area: nav;
  }
  .item-3 {
    grid-area: main;
  }
  .item-4 {
    grid-area: ads;
  }
  .item-5 {
    grid-area: footer;
  } 
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Tutorial</title>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item item-1">item 1</div>
    <div class="grid-item item-2">item 2</div>
    <div class="grid-item item-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus nemo minus itaque rem odit a in ducimus accusantium? Architecto dolorum debitis nihil aliquam, explicabo aspernatur nostrum voluptate, sunt deserunt saepe tempore similique beatae quo iste quisquam eum alias quibusdam aut vitae. Quis, labore aspernatur ipsa tenetur voluptatibus earum cupiditate nihil odit nesciunt illo repellendus id ex eius dolor enim incidunt fugit, voluptate soluta iure placeat repellat error eos. Laboriosam, laudantium. Minima cum dolorem architecto perspiciatis dignissimos nihil exercitationem accusantium id nulla, hic, eos sed? Ipsam natus, ullam quasi harum laudantium quae mollitia omnis aspernatur quo voluptatem rerum aliquid id maiores impedit soluta! Fugit excepturi facilis nesciunt nobis, ab reiciendis, voluptates et quaerat qui nulla voluptate dolorum ipsum quo, officia earum assumenda. Delectus, deleniti porro sunt corporis maiores voluptates nulla harum omnis libero autem qui. Deserunt fugiat perspiciatis, quia quisquam, voluptates atque natus sint velit praesentium vitae unde voluptas nisi fugit dicta suscipit enim accusamus. Maxime pariatur consequatur repellat enim quidem esse, illo, distinctio facere et eius voluptatibus beatae libero, praesentium magnam accusantium omnis numquam! Sed sunt vero ut ad aperiam repellat accusamus quo sint hic quod debitis sequi temporibus autem beatae adipisci aliquid, officiis, a laborum quam tempora ex delectus.</div>
    <div class="grid-item item-4">item 4</div>
    <div class="grid-item item-5">item 5</div>
  </div>
</body>
</html>

Или сохраните height: 100vh; и добавьте overflow-y: scroll; , если вышесказанное не то, что вы ищете.

Смотрите здесь:

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 30px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  .grid-container {
    height: 100vh;
    overflow-y: scroll;
      border: 10px solid #14a76c;
    display: grid;
    grid-template-areas:
      "header header header"
      "nav main ads"
      "footer footer footer";      
    grid-template-columns: 1fr 3fr 1fr;
    grid-auto-rows: max-content;
    
  }
  


  .grid-item {
    background-color: #ccc;
    border: 4px solid #ff652f;
    /* padding: 20px; */
  }

  .item-1 {
    grid-area: header;
  }
  .item-2 {
    grid-area: nav;
  }
  .item-3 {
    grid-area: main;
  }
  .item-4 {
    grid-area: ads;
  }
  .item-5 {
    grid-area: footer;
  } 
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Tutorial</title>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item item-1">item 1</div>
    <div class="grid-item item-2">item 2</div>
    <div class="grid-item item-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus nemo minus itaque rem odit a in ducimus accusantium? Architecto dolorum debitis nihil aliquam, explicabo aspernatur nostrum voluptate, sunt deserunt saepe tempore similique beatae quo iste quisquam eum alias quibusdam aut vitae. Quis, labore aspernatur ipsa tenetur voluptatibus earum cupiditate nihil odit nesciunt illo repellendus id ex eius dolor enim incidunt fugit, voluptate soluta iure placeat repellat error eos. Laboriosam, laudantium. Minima cum dolorem architecto perspiciatis dignissimos nihil exercitationem accusantium id nulla, hic, eos sed? Ipsam natus, ullam quasi harum laudantium quae mollitia omnis aspernatur quo voluptatem rerum aliquid id maiores impedit soluta! Fugit excepturi facilis nesciunt nobis, ab reiciendis, voluptates et quaerat qui nulla voluptate dolorum ipsum quo, officia earum assumenda. Delectus, deleniti porro sunt corporis maiores voluptates nulla harum omnis libero autem qui. Deserunt fugiat perspiciatis, quia quisquam, voluptates atque natus sint velit praesentium vitae unde voluptas nisi fugit dicta suscipit enim accusamus. Maxime pariatur consequatur repellat enim quidem esse, illo, distinctio facere et eius voluptatibus beatae libero, praesentium magnam accusantium omnis numquam! Sed sunt vero ut ad aperiam repellat accusamus quo sint hic quod debitis sequi temporibus autem beatae adipisci aliquid, officiis, a laborum quam tempora ex delectus.</div>
    <div class="grid-item item-4">item 4</div>
    <div class="grid-item item-5">item 5</div>
  </div>
</body>
</html>

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

1. Спасибо. Я не знаю, как я это пропустил. глупая я.

2. изменение 100vh на 100% — это просто удаление 100vh, потому что 100% здесь ничего не даст, так как родительский элемент не имеет определенной высоты

Метки: