css - マテリアライズCSS - スティッキーフッター

Question

ここに記載されている手順 ( http://materializecss.com/footer.html ) に従ってスティッキーフッターを作成しましたが、期待どおりの結果が得られません。

次のコードをコピーして materialize.min.css ファイルに貼り付けました。

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

  main {
    flex: 1 0 auto;
  }

score 58 · Accepted Answer

<main>タグを使用していない可能性があります

注: flexbox を使用して html を構成し、フッターが常にページの下部に表示されるようにします。ページの構造を 3 つの HTML5 タグ内に保つことが重要です: <header>、<main>、 <footer>

score 11 · Accepted Answer

サンプルページのソースを見ると、彼らがどのようにそれを行っているかがわかります: http://materializecss.com/footer.html

以下の例のように HTML を構成します。

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

score 3 · Accepted Answer

(main) の前に (#) を追加するだけです。

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

  #main {
    flex: 1 0 auto;
  }

score 0 · Accepted Answer

css の本体セレクターとメインセレクターの両方に背景色を配置し、両方の要素を確認します。それらの 1 つが色を変更していない場合は、その前にある css の問題である可能性があります。その上のスタイルを確認してください。

8 に答える 8