“Jak upewnić się, że stopka jest naprawiona na dole strony” Kod odpowiedzi

Jak upewnić się, że stopka jest naprawiona na dole strony


//Index.html
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

//CSS FILE 
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
Godwin_NJ

stopka CSS zawsze na dole, ale widoczna

/* Fix the footer to the bottom */
footer { position: fixed; }
Av3

mocowanie stopki na dole

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>
Fierce Fish

Odpowiedzi podobne do “Jak upewnić się, że stopka jest naprawiona na dole strony”

Pytania podobne do “Jak upewnić się, że stopka jest naprawiona na dole strony”

Więcej pokrewnych odpowiedzi na “Jak upewnić się, że stopka jest naprawiona na dole strony” w JavaScript

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu