How to attach a footer to the bottom?

Question

In the mobile version, the footer is correctly located in the bottom, but in the version for large screens, the footer immediately follows the content. Play with the position does not work, bottom: 0 also does not work. How to make the version for large screens, if the content does not occupy the entire part of the monitor, but the footer should still be glued to the bottom of the browser?

https://codepen.io/radio3ananas/pen/jObOBdB

.header {
  background-color: blue;
  max-height: 250px;
  width: 100%;
  font-size:2em
}
body {
  margin: 0;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  min-height: 100%;
}
.wrapper {
  display: block;
  max-width: 2560px;
  flex-grow: 1;
  margin-top: 10px;
  margin-left: 20%;
  margin-right: 20%;
  position: relative;
  z-index: 7;
  text-align: center;
  background-color: red;
  font-size:2em
}
footer {
  background-color: yellow;
  position: relative;
  flex-shrink: 0;
  height: 40px;
  width: 100%;
  bottom: 0;
  z-index: 6;
  font-size:2em
}

<body>
<header class="header">
  header
</header>
<div class="wrapper">
  content
</div>
<footer>
  footer
</footer>
</body>

How to attach a footer to the bottom?

0 Answers0