Question

I’m trying to set my ‘div–stats’ flex container to always be at the bottom of the page, currently I can only do this by manually setting the margin-top to be 430px, however I want to be able to do this automatically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jersey+15&display=swap" rel="stylesheet">
</head>
<body class="b--color">
    <div class="main--container">
    <div class="button--container">
        <button class="button--element">Press to change color</button>
        <h1 class="button--header">Color</h1>
    </div>
    <div class="div--stats">
        <h1 class="previous--colorsh1">Previous Colors</h1>
        <ul class="color--history">
            <li>Test</li>
        </ul>
    </div>
    <script src="script.js"></script>
    </div>
</body>
</html>

/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    height: 100%;
  }
  /*
    5. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    8. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }

  .main--container {
    display: flex;
    flex-wrap: wrap;
    }

.b--color {
    background-color: red
}

.button--container {
    color: white;
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 150px;
    flex-wrap: wrap;
    align-items: flex-start
}

.button--header {
  flex-grow: 0;
  font-family: "Jersey 15", Courier, monospace;
  text-align: center;
  flex-basis: 100%;
  margin-top: 30px;
}

.button--element {
    background-color: white;
    font-weight: 500;
    border-radius: 5px;
    font-style: normal;
    font-family: "Jersey 15", Courier, monospace;
    align-self: center;
    height: 40px;
    flex-basis: 200px;
    transition: all 0.15s linear;
}

.button--element:hover {
  border-color: 2px solid black;
  cursor:grab;
}
.previous--colorsh1 {
    text-align: center;
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-size: 54px;
    flex-basis: 100%;
    color: white;
}

.div--stats {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  border-top: 5px solid white;
  background-color: black;
  flex-grow: 1;
  margin-top: 410px;
}

.color--history {
  color: white;
}


.color--history li {
    list-style: none;
    font-size: 32px;
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
}

I’ve attempted to follow some posts regarding this, but I’ve attempted to set the first flex parent container to justify-content: space-between however this doesn’t seem to work. Setting margin-top: auto will place the div container underneath the button div. As said, setting it to 430px seems to work, if this is the best way of doing it I’m happy to leave it as, and set to flex grow as the list will be populated as it’s going to hold different list items.

Feel like I’ve over complicated the styling of the other divs.

Position Flex parent to always be at the bottom of the page

LEAVE A COMMENT Hủy