Сетка CSS не соответствует высоте родительского элемента div - PullRequest
Новая
       16

Сетка CSS не соответствует высоте родительского элемента div

1 голос
/ 22 марта 2019

Я создал макет сетки CSS с заголовком, сайдером и некоторым прокручиваемым контентом.

Я пытаюсь протестировать этот макет в контейнере div, где я устанавливаю width и height.

Макет хорошо реагирует на width контейнера, но не на height, почему это так и есть ли способ это исправить? 

body {
  margin: 0;
}

.container {
  width: 70%;
  height: 300px; /* How can I set the height? */
}
.page {
  width: 100%;  
  display: grid;  
  grid-template-rows: 55px calc(100vh - 55px); /* height limitation on second row */
  grid-template-columns: 200px auto;
  grid-template-areas:
    "nav header"
    "nav content";
}

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

.header {
  grid-area: header;
  background-color: grey;
}

.content {
  grid-area: content;
  background-color: red;
  overflow-y: auto; /* overflow condition on parent */
}

article {
  height: 1000px; /* height set on child; triggers scroll */
}
<div class="container">
  <div class="page">
    <div class="nav">Side nav</div>
    <div class="header">Header</div>
    <div class="content">
      <article>
        <!-- new section for content -->
        <h1>title</h1>
        <p>A lot of content, simulated by .article height: 1000px</p>

      </article>
    </div>
  </div>

1 Ответ

1 голос
/ 22 марта 2019

Вы должны установить явную высоту для контейнера сетки , а затем удалить calc из grid-template-rows и сделать его 1fr для второй строки.

Таким образом, вы можете установить height: 100% для page (чтобы он наследовал высоту container) и использовать grid-template-rows: 55px 1fr (второй ряд теперь расширяет , чтобы соответствоватьоставшаяся высота).Смотри демо ниже: 

body {
  margin: 0;
}

.container {
  width: 70%;
  height: 300px; /* How can I set the height? */
}
.page {
  width: 100%; 
  height: 100%; /* added */ 
  display: grid;  
  grid-template-rows: 55px 1fr; /* changed */
  grid-template-columns: 200px auto;
  grid-template-areas:
    "nav header"
    "nav content";
}

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

.header {
  grid-area: header;
  background-color: grey;
}

.content {
  grid-area: content;
  background-color: red;
  overflow-y: auto; /* overflow condition on parent */
}

article {
  height: 1000px; /* height set on child; triggers scroll */
}
<div class="container">
  <div class="page">
    <div class="nav">Side nav</div>
    <div class="header">Header</div>
    <div class="content">
      <article>
        <!-- new section for content -->
        <h1>title</h1>
        <p>A lot of content, simulated by .article height: 1000px</p>

      </article>
    </div>
  </div>
...