Когда я пытаюсь просмотреть мою страницу на мобильном устройстве, в частности в браузере 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>