CSS макет сетки: принудительно фиксированный макет - PullRequest
Новая
       14

CSS макет сетки: принудительно фиксированный макет

1 голос
/ 24 апреля 2020

Я сделал следующую сетку (для будущего почтового клиента): 

body
{
  margin:0px;
  font-family:tahoma;
  font-size:12px;
}

.grid-container {
  display: grid;

  grid-template-areas:
    "header header header"
    "mailboxes messages messages"
    "mailboxes viewer viewer"
    "footer footer footer";

  grid-template-columns: 200px 1fr;
  grid-template-rows: 34px 1fr 30% 34px;
  grid-template-rows: 34px 1fr 70% 34px;
  grid-gap: 0px;

  height: 100vh;
}

.header {
  grid-area: header;
  background:#aaa;
}

.mailboxes
{
  grid-area: mailboxes;
  background:#ccc;
}

.footer
{
  grid-area: footer;
  background:#aaa;
}

.gMessages
{
  grid-area: messages;
  background:#bbb;
}

.viewer
{
  grid-area: viewer;
  background:white;
}
    <div class="grid-container">
        <div class="header">header</div>
        <div class="mailboxes">mailboxes</div>
        <div class="footer">footer</div>

        <div class="gMessages">
          messages
        </div>

        <div class="viewer">
        </div>
    </div>

Также см. Здесь: https://jsfiddle.net/w4m1psnh/4/

Это отзывчивый и все в порядке. Проблема в том, что при заполнении данных в области сообщений (.gMessages) область будет увеличиваться и разрушать мой макет:

enter image description here

Это также увеличивает страницы, чтобы нижний колонтитул стал невидимым. Я не мог выяснить, как сохранить область в ее фиксированной высоте, а также сохранить отзывчивость всего макета (сообщения: высота 30%, высота просмотра 70%). Я также попытался назначить фиксированную высоту и применить overlay-y к содержимому сообщения - безуспешно. Так как же заставить макет сетки сохранить присвоенные ей размеры?

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

У вас есть 2 объявления для одного и того же свойства: 

grid-template-rows: 34px 1fr 30% 34px;
grid-template-rows: 34px 1fr 70% 34px;

Первое будет проигнорировано. Итак, если вы хотите, чтобы верхний раздел составлял 30%, оставьте второй.

Теперь нам нужно исправить проблему переполнения.

Добавьте overflow-y: auto к .viewer и .gMessages

В итоге вы получите: 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<style>
    body
    {
      margin:0px;
      font-family:tahoma;
      font-size:12px;
    }

    .grid-container {
      display: grid;

      grid-template-areas:
        "header header header"
        "mailboxes messages messages"
        "mailboxes viewer viewer"
        "footer footer footer";

      grid-template-columns: 200px 1fr;
      grid-template-rows: 34px 1fr 30% 34px;
      grid-gap: 0px;

      height: 100vh;
    }

    .header {
      grid-area: header;
      background:#aaa;
    }

    .mailboxes
    {
      grid-area: mailboxes;
      background:#ccc;
    }

    .footer
    {
      grid-area: footer;
      background:#aaa;
    }

    .gMessages
    {
      grid-area: messages;
      background:#bbb;
      overflow-y: auto;
    }

    .viewer
    {
      overflow-y: auto;
      grid-area: viewer;
      background:white;
    }
</style>
</head>

<body>
    <div class="grid-container">
        <div class="header">header</div>
        <div class="mailboxes">mailboxes</div>
        <div class="footer">footer</div>

        <div class="gMessages">
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
          messages<br/>
        </div>

        <div class="viewer">
        </div>
    </div>
</body>
</html>
0 голосов
/ 24 апреля 2020

Почему вы определяете grid-template-rows два раза? 

.grid-container {
  display: grid;
  grid-template-rows: 34px 1fr 30% 34px;
  grid-template-rows: 34px 1fr 70% 34px;
}

В этом нет необходимости. Браузер (во время каскада) просто лишает законной силы первое правило и использует второе. Другими словами, первое правило игнорируется.

enter image description here

Выберите одно или другое или просто используйте auto (высота на основе содержимого).

Добавьте это к своему коду: 

.grid-container {
  display: grid;
  /* grid-template-rows: 34px 1fr 30% 34px; */
  grid-template-rows: 34px auto 1fr 34px; /* adjustment */
}

.gMessages {
  grid-area: messages;
  overflow: auto;  /* new */
}


.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "mailboxes messages messages"
    "mailboxes viewer viewer"
    "footer footer footer";
  
  grid-template-columns: 200px 1fr;
  /* grid-template-rows: 34px 1fr 30% 34px; */
  grid-template-rows: 34px auto 1fr 34px; /* adjustment */
  height: 100vh;
}

.gMessages {
  grid-area: messages;
  background: #bbb;
  overflow: auto;  /* new */
}

.header {
  grid-area: header;
  background: #aaa;
}

.mailboxes {
  grid-area: mailboxes;
  background: #ccc;
}

.footer {
  grid-area: footer;
  background: #aaa;
}

.viewer {
  grid-area: viewer;
  background: white;
}

body {
  margin: 0px;
  font-family: tahoma;
  font-size: 12px;
}
<div class="grid-container">
  <div class="header">header</div>
  <div class="mailboxes">mailboxes</div>
  <div class="footer">footer</div>
  <div class="gMessages">text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text
    <div class="viewer"></div>
  </div>

jsFiddle demo

...