FlexBox Sticky Footerの問題?
質問
私はFlexBoxと一緒に演奏してスティッキーフッターを作りますが、何らかの理由で、私のdivの1つはフッターと重なっていますか?ウィンドウをより大きな一族にドラッグすると、フッターは完璧です。私は何を間違っていますか?
また、table
メソッドなどの他の方法ではなく、この方法を使用することをお勧めします。
これは私のHTMLレイアウトです:
<body>
<div class="mainContent">...</div>
<div class="footer">...</div>
</body>
.
私のmainContent
DIVの中に、私はヘッダーを含めて、私のウェブサイトの完全な上部を持っています。私はそれをコンテンツ全体としてそれを使ってからフッターを持っているだけです。
これは私が持っているCSSです:
body
{
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.mainContent
{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex: 1;
}
.footer
{
height: 75px;
background: #222;
color:#EEE;
}
.
これを試してみました: http://philipwalton.github 。iio / solved-by-flexbox / demos / sticky-footer /
しかし、私は現在私が現在遭遇しているものと同じ問題を抱えています。
更新
コメントで要求されたときに、Main Content DIVをoverflow: auto;
に設定しますが、コンテンツはフッターで隠されました。これを修正するにはどうすればいいですか?
解決
あなたが求める結果を得るためにあなたのCSSにもう少しのルールを追加する必要があります。 現在、スペースが縮小されると、メインコンテンツがより多くのスペースを取ります。したがって、フッターは実際には重ならないが、そのサイズは減少します。
これは数ヶ月前にしたことです... CSSの中の多くの規則は遺産であるので注意深く、私はそれがあなたが目指すものに近いと思います: > http://plnkr.co/edit/o2bawvg3xv4yjwawwmyr ?p=preview
しかし、本当にあなたがあなたのFlex CSS規則を作成するためにこれを使うことを勧めます: http://the-echoplex.net/flexyboxes/
他のヒント
私はこの問題を解決するためにCSS3 FlexboxまたはGridを使用してこれらの迅速かつ堅牢な解決策を見つけたら、前に時間を過ごしました。これが助けを願っています。
<body>
<header></header>
<main></main>
<footer></footer>
</body>
.
これはIEとChromeの両方に働くべきです:
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex: 1 0 auto;
}
footer, header {
flex-shrink: 0;
}
.
でグリッドレイアウトを試すこともできます。
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr 1fr auto;
}
footer {
grid-row: 3/4;
}
.
私のウェブサイトを参照してください:> http://matthiassommer.it/Web / JavaScript / Sticky-Footer-CSS3-FlexBox-Grid /
答えがすでに受け入れられていることを知っていますが、必要なコードだけを使って非常に簡単な例を持っています(そしてデモを説明するためのいくつかのJavaScript)。
https://codepen.io/alexmccabe/pen/rgmbjj
これは何が起こっているものです:
最初にbody
とhtml
をブラウザの高さの100%に設定します。
html,
body { height: 100%; }
.
次に、wrapper要素をmin-height
を100%に設定し、フレックスを表示します。列は、要素が互いに隣接しないことを確認します。
.site-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.
そして今フッターはmargin-top
のauto
を取得します。これはブラウザウィンドウの下部にあります。
.site-footer {
margin-top: auto;
}
.
注:古いブラウザのスタイルを含めて、Safari 8に注意してください。それは時々難しいものになることができます。