html - 使用网格时如何在网站底部放置页脚？

问题描述

我正在制作一个网站并为我的身体使用网格。现在我正在尝试为我的网站制作页脚，但我的页脚被放置在我的主体右侧。

我认为问题可能出在我的容器上，虽然我不太确定......

.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>

标签： htmlcssfootercss-grid

html - 使用网格时如何在网站底部放置页脚？

问题描述

解决方案

推荐阅读