Css сетки автоматически размер содержимого строки с переполнением - PullRequest
Новая
       18

Css сетки автоматически размер содержимого строки с переполнением

2 голосов
/ 22 июня 2019

У меня были проблемы с реализацией вложенной структуры сетки.Это упрощенный пример.Как вы можете видеть, вложенная структура дает высоту для внешней структуры, таким образом, растущей вне тела.Чего я хотел бы добиться, так это сделать элемент .content__inner и только этот элемент прокручиваемым.Все остальное должно быть в окне просмотра.Как мне этого добиться?

Редактировать 1: Просто чтобы уточнить, я использую 100vh на теле, но не хочу устанавливать его на контейнере.Контейнер должен иметь высоту своего родителя, какой бы он ни был. 

body {
  display: block;
  height: 100vh;
  width: 100%;
  background-color: white;
  margin: 0;
}

.container {
  max-height: 100%;
  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: min-content minmax(min-content, max-content) min-content;
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.3);
}

.side {
  grid-area: side;
  background-color: rgba(0, 255, 0, 0.3);
}

.content {
  grid-area: content;
  background-color: rgba(0, 0, 255, 0.3);
}

.overflow {
  overflow: auto;
}

.content-item {
  height: 20px;
  margin-bottom: 5px;
  background-color: white;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 0, 255, 0.3);
}
<div class="container">
  <div class="header">header</div>
  <div class="side">side</div>
  <div class="content">

    <div class="container container__inner">
      <div class="header header__inner">header</div>
      <div class="side side__inner">side</div>
      <div class="content content__inner overflow">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <div class="footer footer__inner">footer</div>
    </div>

  </div>
  <div class="footer">footer</div>
</div>

Ответы [ 4 ]

1 голос
/ 22 июня 2019

Проблема легко описывается, но может не иметь простого решения (в зависимости от ваших требований).

Проблема на самом деле ясна в самом заголовке:

Содержимое строки сетки Css с авторазмером и переполнением

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

Должно быть что-то, что устанавливает фиксированную длину контейнера. Граница, которая может пересекаться, вызывая условие переполнения.

С MDN : *

Чтобы overflow имел эффект, контейнер уровня блока должен иметь либо установленную высоту (height или max-height), либо white-space, установленную на nowrap.

Высота строк недостаточна для переполнения: 

grid-template-rows: min-content minmax(min-content, max-content) min-content

Но как-то так будет работать: 

  grid-template-rows: 10% 80% 10%

К сожалению, приведенный выше код работает только в Chrome. Чтобы макет также работал в Firefox и Edge, сделайте следующее: 

  grid-template-rows: 10% minmax(0, 80%) 10%


body {
  display: block;
  height: 100vh;
  width: 100%;
  background-color: white;
  margin: 0;
}

.container {
  max-height: 100%;
  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: 10% minmax(0, 80%) 10%; /* adjustment */
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.3);
}

.side {
  grid-area: side;
  background-color: rgba(0, 255, 0, 0.3);
}

.content {
  grid-area: content;
  background-color: rgba(0, 0, 255, 0.3);
}

.overflow {
  overflow: auto;
}

.content-item {
  height: 20px;
  margin-bottom: 5px;
  background-color: white;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 0, 255, 0.3);
}
<div class="container">
  <div class="header">header</div>
  <div class="side">side</div>
  <div class="content">
    <div class="container container__inner">
      <div class="header header__inner">header</div>
      <div class="side side__inner">side</div>
      <div class="content content__inner overflow">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <div class="footer footer__inner">footer</div>
    </div>
  </div>
  <div class="footer">footer</div>
</div>

По сути, вам нужно найти способ установить фиксированный предел высоты в строке переполнения, чтобы полоса прокрутки работала.

Для объяснения различий браузера, описанных выше, смотрите эти сообщения:

0 голосов
/ 22 июня 2019

вам нужно сохранить пространство верхнего и нижнего колонтитула от макета 100vh, чем ваш .content__inner подходит как 100vh ... позвольте мне объяснить вам, добавив одну строку в ваш код. отредактированный код

я добавил код ниже к вашему коду

.content__inner { max-height: calc(100vh - 96px); /* added max height */ }

чтобы контейнер имел высоту своего родителя, независимо от того, что он есть, но он никогда не выходит за пределы нашего 100vh и исправьте это как ваше требование прокрутки

0 голосов
/ 22 июня 2019

Ваш HTML-файл: 

<div class="container">
  <div class="header">header</div>
  <div class="side">side</div>
  <div class="content">

    <div class="container container__inner">
      <div class="header header__inner">header</div>
      <div class="side side__inner">side</div>
      <div class="content-mod">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <div class="footer footer__inner">footer</div>
    </div>

  </div>
  <div class="footer">footer</div>
</div>

Ваш Css-файл: 

body {
  display: block;
  height: 100vh;
  width: 100%;
  background-color: white;
  margin: 0;
  overflow: hidden;
}

.container {
  max-height: 100%;
  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: min-content minmax(min-content, max-content) min-content;
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.3);
}

.side {
  grid-area: side;
  background-color: rgba(0, 255, 0, 0.3);
}

.content {
  grid-area: content;
  background-color: rgba(0, 0, 255, 0.3);
  overflow: auto;
  height: calc(100vh - 74px);
}

.overflow {
  overflow: auto;
}

.content-item {
  height: 20px;
  margin-bottom: 5px;
  background-color: white;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 0, 255, 0.3);
}

Я надеюсь, что это работает для вас.:))

0 голосов
/ 22 июня 2019

Я думаю, это то, что вы имели в виду, когда хотите, чтобы оно было прокручиваемым. Вот мое решение:

Я изменил max-height на 100vh, что установит высоту класса .container ввысота экрана

Я добавил overflow: scroll, чтобы любой контент превышал класс .container Высота с возможностью прокрутки 

.container {
  max-height: 100vh;
  overflow: scroll;


  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: min-content minmax(min-content, max-content) min-content;
}
...