下面是我的代码的副本。我检查了一些论坛，看到利润可能是问题，但我有它设置为0。我有点难在这一点上。任何帮助是感激。
我期待这将完全伸展在我的页面垂直和水平。它真的只有大约1列，并没有完全伸展在任何方向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Practice</title>
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="container">
<header>Header</header>
<main>Main</main>
<nav>Navigation</nav>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: o;
}
body {
font-family: sans-serif;
font-size: 16px;
height: 100vh;
display: grid;
grid-template-areas:
"hd hd hd"
"nav cont side"
"nav foot foot";
}
header,
footer,
main,
aside,
nav {
background-color: peachpuff;
color: #fff;
padding: 20px;
border: palegoldenrod 1px solid;
}
header {
grid-area: hd;
}
footer {
grid-area: foot;
}
main {
grid-area: cont;
}
aside {
grid-area: side;
}
nav {
grid-area: nav;
}
1条答案
按热度按时间ars1skjm1#
我假设你想要整个页面都是网格布局。在这种情况下，
.container应该有网格属性而不是主体。希望这能有所帮助！第一个