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

我进行了以下网格布局(针对即将发布的电子邮件客户端):

    <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>

<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-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;
    }

</style>

Also see here: https://jsfiddle.net/w4m1psnh/4/

It is responsive and everything is fine. The problem is - when filling data into the messages Area (.gMessages), the area will enlarge and destroy my layout:

enter image description here

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

评论
  • fharum
    fharum 回复

    您将其行设置为30%,将其中一无所有的行设置为70%。

    您可以通过将空行的高度设置为空来使空行无效,直到您想使用它并最大化另一行为止。您还需要使用此方法来管理溢出-y,因为这仍然只会使页面“增长”。

    <!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>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Coming+Soon">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
    <link rel="stylesheet" href="assets/css/Footer-Basic.css">
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <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 100% 34px;
      grid-template-rows: 34px 1fr 0% 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: scroll;
    }
    
    .viewer
    {
      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/>
            </div>
    
            <div class="viewer">
            </div>
        </div>
    
    </body>
    
    </html>

    变化:

    overflow-y:

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

    100% vs 0%:

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

    没有这些更改,就目前而言,您将在页面上缩小空白区域。