html - How to create sticky footer in unusual site structure? -


i have following site structure:

  <body>     <div class="page">       <div class="wrp">....</div>        <footer class="footer">...</footer>     </div>   </body> 

the question is: how create sticky footer such structure? tried different variants different sources, nothing fixed footer. "flying" on page. if need css - type in comments.

thanks.

edit:

.wrp {    max-width: 1350px;    margin: 0 auto;  }    .footer {    background-color: #f7f7f7;    font-size: .9em;    padding: 25px 0;    border-top: 1px solid #d9d9d9;  }    .footer a,  .footer {    color: #838383;  }    .footer .midside {    display: flex;  }    .footer .copyright {    width: 100%;  }    .copyright {    font-weight: bold;  }

p.s. first question, if did wrong-please,tell...

a flex column min-height: 100vh , .wrp set flex-grow: 1 put footer @ bottom

body {    margin: 0;  }    .page {    min-height: 100vh;    display: flex;    flex-direction: column;  }    .wrp {    max-width: 1350px;    width: 100%;    margin: 0 auto;    flex: 1 0 0;  }    .footer {    background-color: #f7f7f7;    font-size: .9em;    padding: 25px 0;    border-top: 1px solid #d9d9d9;  }
<div class="page">    <div class="wrp">wrp</div>    <footer class="footer">footer</footer>  </div>


Comments

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

c# - Update a combobox from a presenter (MVP) -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -