web-dev-qa-db-ja.com

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

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

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

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

  main {
    flex: 1 0 auto;
  }
cssmaterial-designmaterialize
23
xennygrimmato

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

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

48
Kenneth De Win

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

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

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
6
JP_

マテリアライズCSSには構造が必要です。

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

保存されます。次に、reactを使用して実装する方法を示します。

index.html

<body id="root"></body>

index.js

ReactDOM.render(<App/>, document.getElementById('root'))

App.js

render() {
return (
  [
    <header>
      ...
    </header>,
    <main>
      ...
    </main>,
    <footer>
      ...
    </footer>
  ]
);

同じレベルで複数のアイテムをレンダリングする配列を返すことに注意してください。

index.css

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

main {
  flex: 1 0 auto;
}
4
Vadim Aidlin

（メイン）の前に（＃）を追加するだけです。

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

  #main {
    flex: 1 0 auto;
  }
3
Shakour Ghafarzoy

このフッターをAngularコンポーネント、おそらく<header> <main> <footer>タグは<app-root> 鬼ごっこ。この場合、次のようにcssを指定する必要があります。

app-root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}
3
Samet Baskıcı

Ember.js（v2.14）を使用している場合：指示を少し変更する必要があります。

App/template/application.hbsが次のように見える場合：

<header>
</header>

<main>
{{outlet}}
</main>

<footer>
</footer>

次に、app/styles/app.jsは次のようになります。

.ember-view {
  display: flex;
  flex-direction: column;
}

main {
  min-height: 100vh;
  flex: 1 0 auto;
}
1
DataDino

Cssの本体セレクターとメインセレクターの両方に背景色を付け、両方の要素を見てみましょう。それらのいずれかが色を変更していない場合、それはその前に来たCSSの問題である可能性があります-すなわち。その上のスタイルを確認してください。

0
James

理由はわかりませんが、Visual Studioでasp.netアプリケーションを作成し、スティッキーフッターを使用してマテリアライズを実装したとき、何らかの理由でmainタグが空白スペースを占有していないことに気付きました！私も正確にドキュメントに従っていました。

理由を調べるために、notepad ++を使用して同様のhtmlページを作成し、Visual Studioページからのみ必要な要素をコピーし始めました（余分なスクリプトとNuGetパッケージはなく、素晴らしい動作をします。main tag空白とフッターが下に突き刺さっています。

次に、両方のページをchrome（visual studioからのもの、notepad ++からのもの））で開き、開発者ツールの各要素の両方のcssを比較し始めました。 !!ただし、mainはvisual studioのコンテンツに限定されますが、notepad ++ !!!の空白スペースを占有します。

私にとっての解決策は、CSSを追加することでした

main {
    min-height: calc(100vh - 90px); 
}

フッターの高さが90ピクセルであることを覚えておいてください。

誰かが未知の問題を修正する代わりに、主な理由を特定できることを願っています

0
omarmallat