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

#text{
    height: 100%;
    background: #ff0000;
    margin-left: 20%;
    
    flex: 1 1 auto;
}
header{
  background-color: black;
  color: white;
  padding: 16px;
}

<header>My Header</header>
<div id = "text">
    test
</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment Cancel Reply