在移动设备上查看时网格容器下的空白区域答案

【问题标题】：White space under grid container when viewing on mobile在移动设备上查看时网格容器下的空白区域
【发布时间】：2018-05-28 13:31:41
【问题描述】：

当我尝试在移动设备上查看我的页面时，特别是 Chrome 浏览器（不是 Firefox），我在容器下看到了空白。下面是代码。当我在主要元素中有广泛的内容时，似乎会发生这种情况。

http://demo.microcad.ca/web/test/test.html

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html { height: 100%; }
        body { min-height: 100%; margin: 0;}
        .container {
          display: grid;
          grid-template-rows: 50px;
          grid-template-columns: 250px;
          grid-template-areas: 
               "aside header"
               "aside main";
          height: 100vh;
        }
        aside {
          grid-area: aside;
          background: #2f313a;
        }
        header {
          grid-area: header;
          background: #fff;
        }
        main {
          grid-area: main;
          background: #ebedf3;
        }
    </style>
<head>

<body>
    <div class="container">
      <aside>aside</aside>
      <header>header</header>
      <main>main
          <table>
              <tr>
                <th>Age</th><th>Height</th><th>Registration</th><th>Logged In</th>
              </tr>
              <tr>
                <td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td>
              </tr>
          </table>
      </main>
    </div>
</body>
</html>

【问题讨论】：

请看Something in my web site or project doesn't work. Can I just paste a link to it?
添加了代码。
无法重现，似乎工作正常
您是在移动设备上查看的吗？滚动到页面的最底部，你会看到很多空白

标签： css css-grid

【解决方案1】：

这是一个与表格相关的问题，表格是一个必须保持在视图中并保持其纵横比的表格，因此一个简单的解决方案是使其成为容器滚动。

main {
  grid-area: main;
  background: #ebedf3;
  overflow-x: auto;
}

或者您可以删除此行，以便不根据屏幕尺寸计算视口。

<meta name="viewport" content="width=device-width, initial-scale=1">

不推荐。

【讨论】：

我觉得这更像是一种解决方法，而不是问题的实际解决方案，我很欣赏你的想法。