Blog: 2024-02-20

From razwiki
Revision as of 12:08, 20 February 2024 by 172.69.65.37 (talk) (Created page with "Alright I created this little code pen https://codepen.io/Razzi-Abuissa/pen/oNVOqyL And I wanted to log it because to get the element to align to the bottom, I had to set the page height to 100%, otherwise it was aligned to the bottom but the whole page was a small height... have run into this before.<pre> html, body { height: 100%; } .main { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } </pre>Also you need a spacer el...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Alright I created this little code pen https://codepen.io/Razzi-Abuissa/pen/oNVOqyL

And I wanted to log it because to get the element to align to the bottom, I had to set the page height to 100%, otherwise it was aligned to the bottom but the whole page was a small height... have run into this before.

html, body {
  height: 100%;
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Also you need a spacer element:

<body>

 <div class="main">
   <div class="space"></div>
   <h1>👋 Hello World!</h1>
 </div>

</body>