Footer not at bottom of the page when page gets longer
Question
I am making a memory game for desktop and mobile with a reset button as a footer. The footer looks fine in desktop view. But when viewing on smaller screen widths the content starts overflowing the footer because the page grows longer. I want the footer to stay at the bottom of the page below the content at all times. I've tried multiple solution from here but none of them have worked so far in my situation.
CSS:
* { padding: 0; margin: 0; box-sizing: border-box; cursor: url(http://cur.cursors-4u.net/games/gam-14/gam1340.cur), auto; } html { height: 100%; } @font-face { font-family: leaguefont; src: url("../fonts/font.ttf"); } body { height: 100%; min-height: 100%; display: flex; flex-direction: column; background-image: url("../images/other/background.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } /*--------------------------------------------navbar*/.nav-link { display: block; padding: 0.5rem 5rem; } a { font-family: leaguefont; background: -webkit-linear-gradient(#ff9900, #ffff66); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 4rem; text-transform: capitalize; } /*--------------------------------------------memory card containers*/.memory-game1, .memory-game2, .memory-game3 { min-height: 40rem; margin: auto; display: flex; flex-wrap: wrap; perspective: 62.5rem; max-width: 100vw; justify-content: center; }.memory-game1 { width: 40rem; }.memory-game2 { width: 60rem; }.memory-game3 { width: 80rem; } /*--------------------------------------------memory cards*/.memory-card, .memory-card2, .memory-card3 { height: calc(33.333% - 0.625rem); margin: 0.313rem; position: relative; transform: scale(1); transform-style: preserve-3d; transition: transform 0.5s; min-width: 149px; }.memory-card { width: calc(25% - 0.625rem); }.memory-card2 { width: calc(16.666% - 0.625rem); }.memory-card3 { width: calc(12.5% - 0.625rem); }.front-face, .back-face { width: 100%; height: 100%; padding: 1.25rem; position: absolute; border-radius: 0.513rem; background-image: linear-gradient(#1c7ccc, #00ccff); backface-visibility: hidden; } /*--------------------------------------------click animation*/ div.memory-card:active, div.memory-card2:active, div.memory-card3:active { transform: scale(0.97); transition: transform 0.2s; }.memory-card.flip, .memory-card2.flip, .memory-card3.flip { transform: rotateY(180deg); }.front-face { transform: rotateY(180deg); } /*--------------------------------------------Footer*/ footer { width: 100%; padding: 3.75rem 0rem; font-family: leaguefont; background: -webkit-linear-gradient(#ff9900, #ffff66); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3rem; text-transform: capitalize; text-align: center; } /*--------------------------------------------Media queries*/ @media screen and (max-width: 1200px) { a { font-size: 2.5rem; } } HTML:
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>League of Memory</title> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="assets/css/style:css" type="text/css" /> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script defer src="assets/js/cards.js"></script> </head> <.-------------------------------------------------navbar--> <nav> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" href="index.html">level one</a> </li> <li class="nav-item"> <a class="nav-link" href="leveltwo.html">level two</a> </li> <li class="nav-item"> <a class="nav-link" href="levelthree.html">level three</a> </li> </ul> </nav> <body> <.-----------------------------------------------memory cards (12)--> <section class="memory-game1"> <div class="memory-card" data-frontface="Caitlyn"> <img class="front-face" src="assets/images/champions/caitlyn.png" alt="Caitlyn" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Caitlyn"> <img class="front-face" src="assets/images/champions/caitlyn.png" alt="Caitlyn" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Darius"> <img class="front-face" src="assets/images/champions/darius.png" alt="Darius" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Darius"> <img class="front-face" src="assets/images/champions/darius.png" alt="Darius" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Ezreal"> <img class="front-face" src="assets/images/champions/ezreal.png" alt="Ezreal" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Ezreal"> <img class="front-face" src="assets/images/champions/ezreal.png" alt="Ezreal" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Gangplank"> <img class="front-face" src="assets/images/champions/gangplank.png" alt="Gangplank" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Gangplank"> <img class="front-face" src="assets/images/champions/gangplank.png" alt="Gangplank" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Graves"> <img class="front-face" src="assets/images/champions/graves.png" alt="Graves" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Graves"> <img class="front-face" src="assets/images/champions/graves.png" alt="Graves" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Katarina"> <img class="front-face" src="assets/images/champions/katarina.png" alt="Katarina" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Katarina"> <img class="front-face" src="assets/images/champions/katarina.png" alt="Katarina" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> </section> <footer> <div> <a href="index.html"> RESET </a> </div> </footer> </body> </html>
1 answers
solution1
0 2020-05-22 14:15:36
I put the nav section between the body tags. HTML-height:100% removed as css. Unnecessary.
* { padding: 0; margin: 0; box-sizing: border-box; cursor: url(http://cur.cursors-4u.net/games/gam-14/gam1340.cur), auto; } /*html { height: 100%; }*/ @font-face { font-family: leaguefont; src: url("../fonts/font.ttf"); } body { height: 100%; min-height: 100%; display: flex; flex-direction: column; background-image: url("../images/other/background.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } /*--------------------------------------------navbar*/.nav-link { display: block; padding: 0.5rem 5rem; } a { font-family: leaguefont; background: -webkit-linear-gradient(#ff9900, #ffff66); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 4rem; text-transform: capitalize; } /*--------------------------------------------memory card containers*/.memory-game1, .memory-game2, .memory-game3 { min-height: 40rem; margin: auto; display: flex; flex-wrap: wrap; perspective: 62.5rem; max-width: 100vw; justify-content: center; }.memory-game1 { width: 40rem; }.memory-game2 { width: 60rem; }.memory-game3 { width: 80rem; } /*--------------------------------------------memory cards*/.memory-card, .memory-card2, .memory-card3 { height: calc(33.333% - 0.625rem); margin: 0.313rem; position: relative; transform: scale(1); transform-style: preserve-3d; transition: transform 0.5s; min-width: 149px; }.memory-card { width: calc(25% - 0.625rem); }.memory-card2 { width: calc(16.666% - 0.625rem); }.memory-card3 { width: calc(12.5% - 0.625rem); }.front-face, .back-face { width: 100%; height: 100%; padding: 1.25rem; position: absolute; border-radius: 0.513rem; background-image: linear-gradient(#1c7ccc, #00ccff); backface-visibility: hidden; } /*--------------------------------------------click animation*/ div.memory-card:active, div.memory-card2:active, div.memory-card3:active { transform: scale(0.97); transition: transform 0.2s; }.memory-card.flip, .memory-card2.flip, .memory-card3.flip { transform: rotateY(180deg); }.front-face { transform: rotateY(180deg); } /*--------------------------------------------Footer*/ footer { width: 100%; padding: 3.75rem 0rem; font-family: leaguefont; background: -webkit-linear-gradient(#ff9900, #ffff66); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3rem; text-transform: capitalize; text-align: center; } /*--------------------------------------------Media queries*/ @media screen and (max-width: 1200px) { a { font-size: 2.5rem; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Document</title> </head> <body> <nav> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" href="index.html">level one</a> </li> <li class="nav-item"> <a class="nav-link" href="leveltwo.html">level two</a> </li> <li class="nav-item"> <a class="nav-link" href="levelthree.html">level three</a> </li> </ul> </nav> <.-----------------------------------------------memory cards (12)--> <section class="memory-game1"> <div class="memory-card" data-frontface="Caitlyn"> <img class="front-face" src="assets/images/champions/caitlyn.png" alt="Caitlyn" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Caitlyn"> <img class="front-face" src="assets/images/champions/caitlyn.png" alt="Caitlyn" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Darius"> <img class="front-face" src="assets/images/champions/darius.png" alt="Darius" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Darius"> <img class="front-face" src="assets/images/champions/darius.png" alt="Darius" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Ezreal"> <img class="front-face" src="assets/images/champions/ezreal.png" alt="Ezreal" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Ezreal"> <img class="front-face" src="assets/images/champions/ezreal.png" alt="Ezreal" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Gangplank"> <img class="front-face" src="assets/images/champions/gangplank.png" alt="Gangplank" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Gangplank"> <img class="front-face" src="assets/images/champions/gangplank.png" alt="Gangplank" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Graves"> <img class="front-face" src="assets/images/champions/graves.png" alt="Graves" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Graves"> <img class="front-face" src="assets/images/champions/graves.png" alt="Graves" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Katarina"> <img class="front-face" src="assets/images/champions/katarina.png" alt="Katarina" /> <img class="back-face" src="assets/images/other/cardlogo.png" alt="League Logo" /> </div> <div class="memory-card" data-frontface="Katarina"> <img class="front-face" src="assets/images/champions/katarina.png" alt="Katarina" /> <img class="back-face" src="assets/images/other/cardlogo:png" alt="League Logo" /> </div> </section> <footer> <div> <a href="index.html"> RESET </a> </div> </footer> <script> </script> <script src="https.//code.jquery.com/jquery-3.4.1.slim:min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper:min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Microsoft Edge and IE gets rid of space for fixed footer at the bottom of the page
Push footer to bottom when page is not full
Show footer when user scrolls to the bottom of the page
Show footer when reaching bottom of page
Fixed footer that expands when scrolled to bottom of page
Footer not sticking to bottom of page when scrolling
Stick the footer to the bottom of the page
Footer not on bottom of page
stick footer at the bottom of the page
place footer at the bottom of the page
Related Tags