how do i create a div at the bottom of the website?

You can set flex display layout on html, body tags and set flex: 1 1 auto to main #text div so that it will get the rest size except header.

html,body {
    height: 100%;
    background-color: green;
    display: flex;
    flex-direction: column;

    height: 100%;
    background: #ff0000;
    margin-left: 20%;
    flex: 1 1 auto;
  background-color: black;
  color: white;
  padding: 16px;
<header>My Header</header>
<div id = "text">

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top