Блог

Главная - Вопросы по программированию - ячейка сетки 1fr расширяется более чем на 100%

ячейка сетки 1fr расширяется более чем на 100%

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

У меня есть следующая сетка, которую я хочу расположить точно по высоте экрана — не меньше, не больше. В сетке у меня есть фиксированный верхний (один), фиксированный нижний колонтитул (три) и прокручиваемый контент (два)

 .grid-container {
    display: grid;
    grid-template-areas:
        "one"
        "two"
        "three"
        ;
    grid-template-rows: 33px 1fr 34px;
    height: 100vh;
}

Что происходит, так это то, что если содержимое внутри two становится слишком большим, высота всей сетки теперь больше, чем область просмотра. В результате мой нижний колонтитул опускается вниз, в то время как я хотел бы вместо этого прокручивать содержимое и оставлять нижний колонтитул там, где он есть.

Я знаю, что могу достичь желаемого с помощью position: fixed , но это урезанный пример более сложной сетки. Приветствуется любая помощь, я предпочитаю использовать сеточный подход, если это вообще возможно. Я собрал скрипку для вашего удобства. Спасибо!

https://jsfiddle.net/x6stfc01/1/

HTML для вашего удобства

 <div class="grid-container">
  <div class="one"></div>
  <div class="two">
    Start of Content
    <div style="height: 5000px"></div>
    End of Content
  </div>
  <div class="three"></div>
</div>

Ответ №1:

Вы могли бы просто добавить overflow-y: scroll к two элементу или overflow-y: auto (еще лучше)

 body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-areas: "one" "two" "three";
  grid-template-rows: 33px 1fr 34px;
  height: 100vh;
}

.one {
  grid-area: one;
  background-color: blue;
}

.two {
  grid-area: two;
  background-color: yellow;
  overflow-y: scroll;
}

.three {
  grid-area: three;
  background-color: red;
}  
 <html>

<head>
</head>

<body>
  <div class="grid-container">
    <div class="one"></div>
    <div class="two">
      Start of Content
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      End of Content
    </div>
    <div class="three"></div>
  </div>
</body>

</html>