尝试在不使用 flex 搞砸页面的 rest 的情况下放置页脚

Question

I am trying to postition a footer to the bottom of my screen no matter the size of the screen, i've tried wrapping it in anoter conatiner.无论屏幕大小如何，我都试图在屏幕底部放置一个页脚，我已经尝试将其包装在另一个容器中。 Justifying the content and aligning the items.证明内容并对齐项目。 I have tried using vh measurements and have tried messing with the height of the container div.我尝试过使用 vh 测量值并尝试弄乱容器 div 的高度。 Nothing seems to be nudging it lol.似乎没有什么可以推动它大声笑。 In codepen it seems to go to the bottom, but that's probably because codepen isn't a full sized screen.在 codepen 中，底部似乎是 go，但这可能是因为 codepen 不是全尺寸屏幕。

<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>The Holy Grail</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      MY AWESOME WEBSITE
    </div>

    <div class="contents">
    
    <div class="sidebar">
        <a href="google.com">⭐ - link one</a>
        <a href="google.com">🦸🏽‍♂️ - link two</a>
        <a href="google.com">🖌️ - link three</a>
        <a href="google.com">👌🏽 - link four</a>
    </div>
    <div class="Cards">
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div>
  <div class="down">
    <div class="footer">
      The Odin Project ❤️
    </div>
  </div>
  </body>
</html>```


CSS: body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 1 1 0;
}

.contents {
  display: flex;
  flex-direction: row;

} 

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}
.down {
  display: flex;
  flex-direction: column;
  justify-items: end;
  height: 60%;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  text-decoration: none;
  font-size: 20px;
  margin: 0;
}

.card {
  height: 200px;
  width:200px;
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0,0,0,.06);
  border-radius: 4px;
}

Answer 1

You can do that by setting positions.您可以通过设置位置来做到这一点。 Give your body element a position: relative;给你的body元素一个position: relative; and .footer和.footer

position: absolute; /* so you can position the footer relative to the body */
width: 100%; /* to make the footer span the entire view port */
bottom: 0; /* and finally to the bottom */

尝试在不使用 flex 搞砸页面的 rest 的情况下放置页脚

问题描述

1 个解决方案

解决方案1
0 2022-03-19 22:29:33

尝试在不使用 flex 搞砸页面的 rest 的情况下放置页脚

问题描述

1 个解决方案

解决方案1 0 2022-03-19 22:29:33

解决方案1
0 2022-03-19 22:29:33