Question

我为即将到来的电子邮件客户端做了以下网格布局：

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）中时，该区域将扩大并破坏我的布局：

它还会放大页面，以便页脚不可见。我无法找到如何将区域保持在固定高度，以及如何使整个布局响应（消息：30％的高度，查看器70％的高度）。我还尝试分配一个固定的高度，然后将overlay-y应用于Message内容-没有成功。那么我将如何强制网格布局保持其分配的尺寸？

Answer 1

您在此处具有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>

Answer 2

您为什么两次定义grid-template-rows？

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

没有必要。浏览器（在层叠期间）仅使第一个规则无效，而使用第二个规则。换句话说，第一个规则将被忽略。

选择一个，或者仅使用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

CSS网格布局：强制固定布局

2 个答案: