我正在制作一个网站，并为我的身体使用网格。现在我正试图为我的网站制作一个页脚，但我的页脚正好位于我的主体右侧。
我觉得问题可能与我的容器有关，虽然我不太确定......
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
我真的不知道如何解决这个问题。有人能帮帮我吗？
这是我的HTML和CSS：
body,
html {
height: 100%;
margin: 0;
width: 100%;
}
body {
font-family: "Montserrat";
display: grid;
grid-template-columns: 100% auto;
grid-template-rows: 90% auto;
background-color: rgb(27, 27, 27);
color: white;
}
.bg,
.bg2 {
width: 100%;
height: 100%;
position: absolute;
}
.bg {
-webkit-clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
z-index: -1;
background-color: #053970;
}
.bg2 {
z-index: -2;
background-color: #004288;
-webkit-clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
}
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
a {
color: black;
}
a:visited {
color: black;
}
ul {
list-style-type: none;
perspective: 1000px;
}
ul a li {
display: grid;
grid-template-columns: 20% auto;
border-radius: 10px;
padding: 15px;
cursor: pointer;
transform: rotateY(-30deg) rotateX(15deg);
position: absolute;
opacity: 0.8;
border-bottom: 4px solid rgba(0, 0, 0, .2);
mix-blend-mode: multiply;
width: 500px;
}
ul a:nth-child(1) li {
background: #a9cfe2;
top: -105px;
z-index: 2;
}
ul a:nth-child(2) li {
background: #85b890;
z-index: 1;
top: 0px;
}
ul a:nth-child(3) li {
background: #cca6a6;
z-index: 0;
top: 105px;
}
ul a li:hover {
transform: rotateY(-22deg) rotateX(7deg) scale(1.05);
transition: transform .45s ease-out;
z-index: 3;
mix-blend-mode: normal;
}
footer {
height: 10%;
width: 100%;
background-color: #333;
bottom: 0;
left: 0;
display: initial;
float: bottom;
}
img {
margin-top: 5;
width: 70px;
}
h1 {
font-size: 3em;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
}
#left>p {
color: #aaa;
line-height: 1.5em;
}
#right {
margin-left: 15%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="styles/main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div class="bg"></div>
<div class="bg2"></div>
<div class="container">
<div id="left">
<h1>Supercool Website</h1>
<h2>Supercool website for cool kids only</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac quam augue. Suspendisse potenti. Phasellus at vestibulum nunc. Phasellus suscipit elit odio, feugiat varius quam hendrerit sed. Mauris fringilla blandit maximus. Cras magna metus,
imperdiet congue convallis eu, finibus eget urna. In ac porttitor diam, sit amet sagittis tellus. Nullam consequat luctus ornare. Nulla vitae lectus vitae nisi dapibus ultricies. Aenean tempus nisl sit amet augue luctus pulvinar. Phasellus scelerisque
aliquet lorem.</p>
</div>
<div id="right">
<ul>
<a href="#">
<li>
<img src="img/img1.png">
<span>
<strong>Option 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img2.png">
<span>
<strong>Option 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img3.png">
<span>
<strong>Over Ons</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
</ul>
</div>
</div>
</body>
</html>也许你遗忘了
grid-template-rows：auto 1fr auto;？
看看这篇文章也许它可以帮助。
https://dev.to/niorad/keeping-the-footer-at-the-bottom-with-css-grid-15mf