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