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
Post a Comment