web-dev-qa-db-ja.com

CSS：フッターの重複コンテンツ、その他の不具合

私はここと他の場所で同様の問題を探しましたが、決定的な答えを見つけることができないようです。フッターに到達するのに十分なテキストをページに追加すると、フッターは単にテキストに重なります。ブラウザウィンドウのサイズを小さくして、コンテンツを保持するフッターとコンテナを強制する場合も同じです。時折、これは常に「高さ」の100％を占めるはずですが、何らかの理由で縮小する「灰色の部分」とも呼ばれる「コンテナー」に現れます。

これは一晩中私を元気づけるようなものなので、あまりはっきりと考えていません。私はそれが愚かで簡単に修正できるものだと確信していますが、私はプロのデザイナーではなく、問題が何であるかを確かに見逃しています。

以下は私のCSSと、ページのすべての関連部分で作成したJSFiddleです。

html, body {
    margin: 0;
    padding: 0;
}

html, body {
    background: #252525; 
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}

body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}

#container {
  color: white;
  margin-bottom: 2em;
  min-height: 100%;
  overflow: auto;
  padding: 0 2em;
  text-align: justify;
}

#footer {
  bottom: 0;
  color: #707070;
  height: 2em;
  left: 0;
  position: fixed;
  font-size: small;
  width:100%;
}

典型的なページのモックアップ。

htmlcsssticky-footer
12
Flawedspirit

これを変える：

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

デモ

10
Sagar Guhe

[〜＃〜] demo [〜＃〜] を参照してください

CSSをいくつか変更しました。ご覧ください。それがあなたのお役に立てば幸いです。

更新されたCSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}
6
NikeshPathania

2017年にこれにつまずいた人は、このような flexbox のようなレイアウトの頭痛を軽減するための優れたオプションが考案されたことを知っているはずです。

基本的に、あなたがしなければならないことは<body>を次のように設定することです：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

次に、flex:1 1 autoを「メイン」セクションまたは中央セクション（この場合は#container）に適用します。これにより、利用可能なスペースを埋めるために垂直に拡張され、フッターが下部に貼り付けられます。

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

align-items:centerをflexの親に追加して、クロス軸のセンタリング（この場合は水平）を処理します。

上記のスニペットの例を次に示します。

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #252525;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  color: white;
  background: #363636;
  padding: 2em;
  background: #363636;
  flex: 1 1 auto;
  /*grow vertically*/
  width: 55%;
  text-align: center;
}

#footer {
  color: #707070;
  height: 2em;
  font-size: small;
}
<body>
  <div id="container">
    <h1>A webpage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
      nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
    <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
      libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
  </div>
  <div id="footer">This is a footer.</div>
</body>
5
Scott Weaver

最初にこのコードを書く

footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;

}

そして今メディアクエリを設定します

@media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;

}}

これがあなたを助けることを願っています:)

1
Amol Impal

ページの下部に固定されていない（オーバーラップしない）ままになるスティッキーフッターを探していたと思います。私がこの答えを追加したかったのは、（それがうまくいった）私にとって、それが私が探していたものに近いからです。

解決

解決策は Chris Bracco に由来し、効果を再現するために必要なものを詳しく説明します。

HTML

HTMLは次のようになります。

<html>

<body class="body-for-sticky">
    <...> your content </...>
    <div class="footer sticky-footer"> your footer </div>
</body>

</html>

CSS

次のようなcssを追加する必要があります。

html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

*,
*:before,
*:after {
    box-sizing: inherit;       /* enable the "border-box effect" everywhere */
}

.body-for-sticky {
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

.sticky-footer {
    position: absolute;        /* for it to disappear under last body element */
    bottom: 0;                 /* so the footer can stick to the bottom*/
}

例

これは、スティッキーフッターを作成するために必要な基本のようなものです。以下に例を示します（レンダリングを改善するためのCSSを追加）。

html {
      height: 100%;
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    .body-for-sticky {
      position: relative;
      min-height: 100%;
      padding-bottom: 6rem;
    }
    
    .sticky-footer {
      position: absolute;
      bottom: 0;
    }
    
/* for the rendering */

    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    .footer {
      right: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }
    
    .demo {
      margin: 0 auto;
      padding-top: 64px;
      max-width: 640px;
      width: 94%;
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sticky footer</title>
    <style>  </style>
</head>

<body class="body-for-sticky">

  <div class="demo">
    <h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>

    <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to Push it to the bottom of the viewport naturally.</p>

    <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

    <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

    <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>

    <p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
  </div>

  <div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

</body>

</html>

スニペットを展開し、結果をフルサイズで見て、どのように機能するかを確認します。

0
Sylhare