web-dev-qa-db-ja.com

ページの下部に移動しないフッターを具体化する

コンテンツが多くない場合でも、ページの下部にフッターを保持する方法はありますか？マテリアライズページの指示に従い、すべてのHTMLを<header>、<main>、<footer>タグ。フッターに自分のCSSをまったく適用していません。

任意の助けいただければ幸いです。

enter image description here

これが私のHTMLです：

<body>
  <header>
    <nav role="navigation">
      <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">Some Title <i class="material-icons left hide-on-med-and-down">apps</i></a>
        <ul id="dropdown" class="dropdown-content">
          <li><a href="">Register</a></li>
          <li class="divider"></li>
          <li><a href="">Sign In</a></li>
        </ul>
        <ul class="right hide-on-med-and-down">
          <li id="timer-tab"><a href="">Tab 1</a></li>
          <li id="stats-tab"><a href="">Tab 2</a></li>
          <li id="graphs-tab"><a href="">Tab 3</a></li>
          <li><a href="" data-activates="dropdown" class="dropdown-button">Tab 4<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
      </div>
    </nav>
  </header>

  <main>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </main>

  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Some Title</h5>
          <p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col l2 offset-l2 s6">
          <h6>About</h6>
          <ul>
            <li><a href="" class="grey-text text-lighten-3">Help</a></li>
            <li><a href="" class="grey-text text-lighten-3">Contact</a></li>
            <li><a href="" class="grey-text text-lighten-3">Suggestions</a></li>
          </ul>
        </div>
        <div class="col l2 s6">
          <h6>Developer</h6>
          <ul>
            <li><a href="" class="grey-text text-lighten-3">Source</a></li>
            <li><a href="" class="grey-text text-lighten-3">Contribute</a></li>
            <li><a href="" class="grey-text text-lighten-3">API Docs</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">Made by <a href="">Me </a></div>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="/js/materialize.min.js"></script>
  <script src="/js/bundle.js"></script>
</body>
htmlcssfootermaterialize
13
saadq

materializecss によると、以下のルールをCSSに追加して、スティッキーフッターを取得する必要があります。

 body {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
 }
 main {
     flex: 1 0 auto;
 }

Jsfiddle

20
Alex

追加するだけで、アレックスの回答は完全に機能します。

<body>
<!-- Header content -->
<main>Page Content</main>
<!-- Footer content --> 
</body>
12
thacilima

このスタイルを追加するだけですposition：fixed; bottom：0; left：0; width：100％;フッター要素に。

例えば：

<footer class="page-footer" style="position:fixed;bottom:0;left:0;width:100%;">
    ...
</footer>
3
Yohannes Kristiawan

また、次のように正しいマテリアライズ形式を使用しています https://materializecss.com/footer.html

しかし、IEブラウザでは正常に機能していませんが、次のスタイルを追加すると、style = "position：fixed; bottom：0; left：0; width：100％ ;" 大丈夫でしょう。

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}
<!DOCTYPE html>
<html lang="en">
    <head>
    
    </head>
    <body>
        <header>
        </header>

        <main>
        </main>
        
        <footer style="position:fixed;bottom:0;left:0;width:100%;">
        </footer>
    </body>
</html>
1
Máté Gregor

誰かがマテリアライズとの反応を使用している場合に備えて、ルートdivが原因で同じ問題が発生したため、ボディにディスプレイフレックスの変更を割り当てる代わりに、

#root {
         display: flex;
         min-height: 100vh;
         flex-direction: column;
       }

ルートは直接の親です。

0
bMounir