FlexBox Sticky Footerの問題？

StackOverflow https://stackoverflow.com//questions/23026696

質問

私は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に注意してください。それは時々難しいものになることができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top