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

Specthildur
April 26, 2024
56 views
0 votes
2 Answers

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.

Tags: css

Answers

Would this be what you are looking for?

https://jsfiddle.net/rLnj576d/10/

/*
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%;
  min-height: 100vh;
  display:flex;
}

/*
    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 {
  flex-grow:1;
  display: flex;
  flex-direction: column;
}

.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;
  flex-grow:1;
}

.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-wrap: wrap;
  border-top: 5px solid white;
  background-color: black;
  flex:1 1 0;
  /* 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;
}

This can be done easily with flexbox and margin auto.
But first you need to make sure that everything it’s set for it to work properly.
The parents must fill the viewport as you expect in order to put it in the bottom.

Here you have a simple example of putting an element at the bottom with flexbox.

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Make sure <html> and <body> fill the viewport */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;
}

/* Avoid flex-items to shrink by default */
* {
  flex-shrink: 0;
}

:root {
  background-color: #111;
  color: #fff;
}

.main-container {
  /* make sure .main-container fills its parent */
  height: 100%;

  display: flex;
  flex-direction: column;
  
  overflow: auto;
  
  & > .bottom {
    margin-top: auto;
  }
}


.top {
  height: 50px;
  background-color: #06f;
}

.bottom {
  height: 50px;
  background-color: #90f;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="main-container">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers