Как разместить нижний колонтитул в нижней части моего сайта при использовании сетки? - PullRequest
Новая
       10

Как разместить нижний колонтитул в нижней части моего сайта при использовании сетки?

0 голосов
/ 24 февраля 2019

Я делаю сайт и использую сетку для своего тела.Сейчас я пытаюсь сделать нижний колонтитул для своего сайта, но мой нижний колонтитул размещается справа от моего основного тела.

Я думаю, что проблема может быть связана с моим контейнером, хотя я не совсем уверен ...

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

1 Ответ

0 голосов
/ 24 февраля 2019

Может быть, вы забываете

grid-template-row: auto 1fr auto;?

Ознакомьтесь с этой статьей Может быть, это поможет.

https://dev.to/niorad/keeping-the-footer-at-the-bottom-with-css-grid-15mf

...