Question

当我尝试在移动设备上专门使用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>

Answer 1

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

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

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

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

不推荐。

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

1 个答案: