it-swarm.com.ru

Вложенная CSS-сетка неявно заполняет оставшуюся высоту от родительской сетки

Я пытаюсь, чтобы дочерняя сетка CSS учитывала размеры родительской сетки. Как я мог это сделать?

Сначала я писал что-то вроде этого: https://codepen.io/anon/pen/XVExrj

CSS:

.site, body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height:300px;
  width:300px;
  grid-template-rows: 30px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    'nav'
    'child';
  background-color:grey;
}

.nav { 
  background-color: #0D47A1;
  grid-area: nav;
}

.child { grid-area:child; }

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    'test';
  background-color:grey;
}

.content {
  background-color: red;
  overflow:auto;
  grid-area:test;
  height:3000px;
}

* { box-sizing: border-box; }

HTML

<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>

Я хотел бы, чтобы 'content' представлял собой прокручиваемую область, которая не увеличивает высоту родительского элемента (поэтому она должна быть '270px').

5
Matthew I

Элемент сетки (.child) по умолчанию получает min-height: auto. Примените min-height: 0 к .child, чтобы отменить это.

Затем добавьте height: 100% к .child-grid и overflow: auto к content...

.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 10vh 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: #0D47A1;
  grid-area: nav;
}

.child {
  grid-area: child;
  min-height: 0;
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
  height: 100%;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>

5
sol

Вот быстрое и простое решение без изменений в вашем HTML. Просто добавьте это в свой код:

.child { 
   overflow: auto;
}

Это переопределяет настройку min-height: auto по умолчанию для элементов сетки, позволяя им сжиматься ниже размера их содержимого и создавать условия переполнения.

Полное объяснение здесь: Предотвратить контент от расширения элементов сетки

.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: aqua;
  grid-area: nav;
}

.child {
  grid-area: child;
  overflow: auto;   /* NEW */
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>


В качестве альтернативы, вместо того, что у вас здесь:

.parent-grid {
  display: grid;
  height: 300px;
  grid-template-rows: 30px 1fr;
}

Попробуй это:

.parent-grid {
  display: grid;
  grid-template-rows: 30px 270px;
}

.content {
  overflow: auto;
  height: 100%;
}

Я также удалил дополнительный контейнер (.child-grid), в котором нет необходимости.

.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 270px;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: aqua;
  grid-area: nav;
}

.child {
  grid-area: child;
}

.content {
  background-color: red;
  overflow: auto;
  height: 100%;
}

* {
  box-sizing: border-box;
}
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="content">
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
    </div>
  </div>
</div>

5
Michael_B

Хорошо, дайте выделенную высоту вашей детской сетке:

height: 240px;

и установить

overflow: auto;

Так что, действительно, высота обеспечена. И, если необходимо, появятся полосы прокрутки . Не уверен, что действительно свежая функция решеток CSS действительно лучше всего использовать здесь. Вы можете взглянуть на flexbox: https://codepen.io/fnocke/details/RxMKOK

Или - даже более совместимый - вы действительно можете придерживаться нормального display: block;. Пока вы определяете высоту и устанавливаете переполнение, это также должно происходить.

0
Frank Nocke