display the footer always down the page always

Hos Mercury

I tried to stick the footer down the page and i failed, i googled many methods but no clue . Not fixed position , but to the end of the page , and if the content is little , it should visible down the page in that case ..

<body>
  <div class="menu-btn">
    <i class="fa fa-bars fa-2x"></i>
  </div>  
  <div class="container">
    <div class="wrapper">
      <nav class="main-nav">
        <a class="logo" href="/">XP Blog</a>
        <ul class="main-menu">
            <li><a href="/">Home</a></li>
            <li><a href="/posts">Posts</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
      
          <ul class="right-menu">
            <li>
              <a href="#"><i class="fas fa-user"></i></i></a>
            </li>
            <li>
              <a href="#"><i class="fas fa-search"></i></a>
            </li>
          </ul>
      </nav>
    <main class="main">


<a href="/posts/add" class="post-add"><i class="fas fa-plus"></i></a>
<h1>Posts</h1>

<ul>
  
  <p>No posts yet</p>
  
</ul>

        </main>
    </div>
        <footer class="footer">
        <p>© 2020 XP Blog</p>  
        </footer>
    </div>
    
    <script>
        document.querySelector('.menu-btn').addEventListener('click', () => 
        document.querySelector('.main-menu').classList.toggle('show'));
    </script>
</body>


    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fff;
  color: #000;
  font-size: 15px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

a {
  color: #262626;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

.container {
}

.wrapper {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 85%;
  flex: 9;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 20px 0px;
  font-size: 13px;
}

.main-nav .logo {
  width: 100px;
  color: rgb(156, 4, 211);
  font-size: 20px;
}

.main-nav ul {
  display: flex;
}

.main-nav ul li {
  padding: 0 10px;
}

.main-nav ul li a {
  padding-bottom: 2px;
}

.main-nav ul li a:hover {
  border-bottom: 2px solid #262626;
}

.main-nav ul.main-menu {
  flex: 1;
  margin-left: 20px;
}

.menu-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  display: none;
  z-index: 2;
}

.main {
  flex: 7;
}

.main h1 {
  border-bottom: solid 1px #f2f2f2;
}

.post {
  margin: 15px 0;
  border-bottom: 1px rgb(162, 162, 162) solid;
  padding: 10px;
  width: 90%;
}

.post:last-child {
  border: none;
}

.post-author {
  float: left;
  margin-right: 30px;
  font-size: 10px;
}

.post-date {
  font-size: 10px;
  font-style: italic;
  color: grey;
}

.post-content {
  margin-top: 10px;
}

.post-add {
  position: absolute;
  top: 70px;
  right: 30px;
  width: 50px;
  height: 25px;
  font-size: 20px;
}

form {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 20px;
}

input,
textarea {
  margin: 5px;
  padding: 5px;
  border: solid 1px rgb(202, 202, 202);
  border-radius: 5px;
}

textarea {
  height: 100px;
}

input[type='submit'] {
  cursor: pointer;
  align-self: flex-end;
  width: 100px;
  background-color: rgb(1, 61, 1);
  color: white;
  margin: 20px 30px;
}

.footer {
  background-color: #f2f2f2;
  color: #616161;
  font-size: 12px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  width: 90%;
  max-width: 1100px;
  margin: 20px auto 0;
}

@media only screen and (max-width: 700px) {
  .menu-btn {
    display: block;
  }

  .main-nav .right-menu {
    margin-right: 50px;
  }

  .main-nav ul.main-menu {
    position: absolute;
    left: 0px;
    top: 60px;
    background-color: #f2f2f2;
    width: 50%;
    border-right: #ccc 1px solid;
    opacity: 0.9;
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    transform: translateX(-500px);
    transition: transform 0.3s ease-in-out;
  }

  .main-nav ul.main-menu.show {
    transform: translateX(-20px);
  }

  .main-nav ul.main-menu li {
    height: 40px;
    border-bottom: #ccc 1px solid;
    line-height: 40px;
  }

  .main-nav ul.main-menu li a:hover {
    margin-left: 2px;
    border-bottom: none;
  }

  .main-nav ul.main-menu li:last-child {
    border-bottom: none;
  }
}

Scoopex

You need to add a position: absolute; to your footer, if you want it fixed or sticky.. add position: fixed; or position: sticky;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fff;
  color: #000;
  font-size: 15px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

a {
  color: #262626;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

.container {
}

.wrapper {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 85%;
  flex: 9;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 20px 0px;
  font-size: 13px;
}

.main-nav .logo {
  width: 100px;
  color: rgb(156, 4, 211);
  font-size: 20px;
}

.main-nav ul {
  display: flex;
}

.main-nav ul li {
  padding: 0 10px;
}

.main-nav ul li a {
  padding-bottom: 2px;
}

.main-nav ul li a:hover {
  border-bottom: 2px solid #262626;
}

.main-nav ul.main-menu {
  flex: 1;
  margin-left: 20px;
}

.menu-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  display: none;
  z-index: 2;
}

.main {
  flex: 7;
}

.main h1 {
  border-bottom: solid 1px #f2f2f2;
}

.post {
  margin: 15px 0;
  border-bottom: 1px rgb(162, 162, 162) solid;
  padding: 10px;
  width: 90%;
}

.post:last-child {
  border: none;
}

.post-author {
  float: left;
  margin-right: 30px;
  font-size: 10px;
}

.post-date {
  font-size: 10px;
  font-style: italic;
  color: grey;
}

.post-content {
  margin-top: 10px;
}

.post-add {
  position: absolute;
  top: 70px;
  right: 30px;
  width: 50px;
  height: 25px;
  font-size: 20px;
}

form {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 20px;
}

input,
textarea {
  margin: 5px;
  padding: 5px;
  border: solid 1px rgb(202, 202, 202);
  border-radius: 5px;
}

textarea {
  height: 100px;
}

input[type="submit"] {
  cursor: pointer;
  align-self: flex-end;
  width: 100px;
  background-color: rgb(1, 61, 1);
  color: white;
  margin: 20px 30px;
}

.footer {
  background-color: rgb(199, 199, 199);
  color: #616161;
  font-size: 12px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: auto;
}

@media only screen and (max-width: 700px) {
  .menu-btn {
    display: block;
  }

  .main-nav .right-menu {
    margin-right: 50px;
  }

  .main-nav ul.main-menu {
    position: absolute;
    left: 0px;
    top: 60px;
    background-color: #f2f2f2;
    width: 50%;
    border-right: #ccc 1px solid;
    opacity: 0.9;
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    transform: translateX(-500px);
    transition: transform 0.3s ease-in-out;
  }

  .main-nav ul.main-menu.show {
    transform: translateX(-20px);
  }

  .main-nav ul.main-menu li {
    height: 40px;
    border-bottom: #ccc 1px solid;
    line-height: 40px;
  }

  .main-nav ul.main-menu li a:hover {
    margin-left: 2px;
    border-bottom: none;
  }

  .main-nav ul.main-menu li:last-child {
    border-bottom: none;
  }
}

<body>
  <div class="menu-btn">
    <i class="fa fa-bars fa-2x"></i>
  </div>  
  <div class="container">
    <div class="wrapper">
      <nav class="main-nav">
        <a class="logo" href="/">XP Blog</a>
        <ul class="main-menu">
            <li><a href="/">Home</a></li>
            <li><a href="/posts">Posts</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
      
          <ul class="right-menu">
            <li>
              <a href="#"><i class="fas fa-user"></i></i></a>
            </li>
            <li>
              <a href="#"><i class="fas fa-search"></i></a>
            </li>
          </ul>
      </nav>
    <main class="main">


<a href="/posts/add" class="post-add"><i class="fas fa-plus"></i></a>
<h1>Posts</h1>

<ul>
  
  <p>No posts yet</p>
  
</ul>


        </main>
    </div>
        <footer class="footer">
        <p>© 2020 XP Blog</p>  
        </footer>
    </div>
    
    <script>
        document.querySelector('.menu-btn').addEventListener('click', () => 
        document.querySelector('.main-menu').classList.toggle('show'));
    </script>
</body>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-25

Comments

0 comments

Always display footer at the bottom of the page

Show footer at the bottom of the page always

CSS footer that is always on the bottom of page

Position of Back button always right and down of a page

Making Footer Always At Bottom

display the footer always down the page always

display the footer always down the page always

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

C++ 16 bit grayscale gradient image from 2D array

JMeter: Why get error when try to save test plan

JWT gives JsonWebTokenError "invalid token"

How to make thrown errors visible outside of a Promise?

How to tell if iOS Today Widget is being updated in the background?

Calling Doctrine clear() with an argument is deprecated

Capybara Selenium Chrome opens About Google Chrome

How to update azerothcore-wotlk docker container

Adding Ripple Effect to RecyclerView item

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Error while applying filter on dataframe - PySpark

Unable to add slack to bluemix project

MyPy fails dataclass argument with optional list of objects type

How can I validate and parse phone numbers to extract their country calling code and area code?

Single Sign-On in Spring by using SAML Extension and Shibboleth

python how to create many-to-many of lists inside one list