“Как убедиться, что нижний колонтитул закреплен внизу страницы” Ответ

Как убедиться, что нижний колонтитул закреплен внизу страницы


//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

CSS -нижний колонтитул всегда внизу, но видимый

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

исправление нижнего колонтитула внизу

<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

Ответы похожие на “Как убедиться, что нижний колонтитул закреплен внизу страницы”

Вопросы похожие на “Как убедиться, что нижний колонтитул закреплен внизу страницы”

Больше похожих ответов на “Как убедиться, что нижний колонтитул закреплен внизу страницы” по JavaScript

Смотреть популярные ответы по языку

Смотреть другие языки программирования