web-dev-qa-db-ja.com

CSSを使用してスティッキーフッターを作成するにはどうすればよいですか？

フッターをページの下部に残しておきたい。私はこれを試してみます

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

しかし、私のフッターは乱雑になっています。私のウェブサイトはWordPressで作られています。可能であれば、このためのプラグインは使用したくありません。そして、純粋なCSSのみを使用したいと思います。

ここにCSSスクリプトがあります

footer #bottom-footer{
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
border-top: 5px solid #F80000;
text-align: left;
padding: 9px;
font-size: 13px;
}
.footer-wrap a{
color:#000000;
}
.footer-wrap a:hover{
color:#F80000;
}
.footer-logo a {
margin-bottom: 6px;
display: block;
}
.footer-socials {
float: left;
line-height: 0px;
}
.footer-socials a {
border-radius: 100%;
color: #ffffff;
display: inline-block;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 3px;
text-align: center;
vertical-align: middle;
width: 30px;
}
.footer-socials a.facebook {
background: none repeat scroll 0 0 #1f69b3;
}
.footer-socials a.Twitter {
background: none repeat scroll 0 0 #43b3e5;
}
.footer-socials a.gplus {
background: none repeat scroll 0 0 #d84734;
}
.footer-socials a.youtube {
background: none repeat scroll 0 0 #df2126;
}
.ak-contact-address .socials a.pinterest {
background: none repeat scroll 0 0 #ff3635;
}
.footer-socials a.linkedin {
background: none repeat scroll 0 0 #1a7696;
}
.footer-socials .socials a.flickr {
background: none repeat scroll 0 0 #e1e2dd;
}
.footer-socials .socials a.vimeo {
background: none repeat scroll 0 0 #7fdde8;
}
.footer-socials .socials a.instagram {
background: none repeat scroll 0 0 #c8c5b3;
}
.footer-socials .socials a.tumblr {
background: #395976;
}
.footer-socials .socials a.rss {
background: none repeat scroll 0 0 #fbc95d;
}
.footer-socials .socials a.github {
background: none repeat scroll 0 0 #383838;
}
.footer-socials .socials a.stumbleupon {
background: none repeat scroll 0 0 #e94c29;
}
.footer-socials .socials a.skype {
background: none repeat scroll 0 0 #09c6ff;
}
.footer-socials .social-icons span {
cursor: pointer;
display: inline-block;
}
.footer-socials .socials i {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.tagcloud a{
font-size: 13px !important;
background: rgba(0,0,0,0.4);
padding: 8px 10px;
margin: 0 2px 4px 0;
display: inline-block; 
line-height: 1;
}
.sidebar .tagcloud a{
background: #23A38F;
color: #FFF;
}

ウェブサイトリンク

csssticky-footer
7
user3709362

利用できなくなったオンラインソースから実装されたクリーンなメソッド（デッドリンク）に従うと、ページに必要な最小コードは次のようになります（注-選択には#bottom-footerではなくfooter #bottom-footerを使用するのがおそらく最善ですあなたのフッターの-それは問題の一部である可能性があります）：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}
12
Jason W

これは完璧に機能します。これはW3SCHOOLSの例です

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>
3
Richard de Ree

flex box CSSと次のHTML構造を振りかけることを使用したいくつかの最新のメソッド：

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

方法1:(固定高さフッター）display:flexとflex-direction:columnをbodyに適用します。 flex:1（flex-grow:1）をmain要素に適用します。

メイン要素は垂直方向に成長して空きスペースを占有するため、フッターが下部に固定されます。

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

header {
  background-color: #cffac7;
  height:50px;
}

main {
  background-color: #f8e2ff;
  flex:1;
}

footer {
  background-color: #fceec7;
  height:50px;
}
<header></header>
<main></main>
<footer></footer>

方法2:(固定高さフッター）display:flexとflex-direction:columnをbodyに適用します。 margin-top:autofooterを適用します。

フレックスコンテナ内の自動マージンが利用可能なすべての空き領域を吸収する であるため、これで完了です。フッターが下部に固定されます。これは、メインの高さやコンテンツに依存しないことに注意してください。この場合、mainにフレックスルールをまったく指定していないため、デフォルト値のflex:initial（flex: 0 1 auto）が取得されます。

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

    header {
      background-color: #cffac7;
      height:50px;
    }

    main {
      background-color: #f8e2ff;
    }

    footer {
      background-color: #fceec7;
      height:50px;
      margin-top:auto;
    }
<header></header>
<main></main>
<footer></footer>

方法3:(流体の高さのフッター）これは実際には＃1と同じ手法ですが、固有の高さを持たない要素を使用します。競合する要素に与えられた（単位のない）flex-grow値の比率により、mainはheaderおよびfooterの5倍の速度で成長します。 。

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

header {
  background-color: #cffac7;
  flex:1;
}

main {
  background-color: #f8e2ff;
  flex:5;
}

footer {
  background-color: #fceec7;
  flex:1 
}
<header></header>
<main></main>
<footer></footer>
1
Scott Weaver

CSSグリッドで働く2019ソリューション

あなたがここにいるなら、あなたはおそらく私がしたようにあまりにも長い間苦しんでいました:)

これがwillが機能する解決策です。それは私がここで私のサイトに使用するものです：

https://aleksandrhovhannisyan.github.io/

私のサイトドメインの下にある偽のURLに移動することで、ページ上のコンテンツの量に関係なく機能することを確認できます。

enter image description here

私は物事を非常に一般的で再利用可能なものにしておきます。以下は、固定された上部ナビゲーション/ナビゲーションバー、メインコンテンツ領域、およびスティッキーフッターで構成される基本的なDOMを含む、必要なすべてのコードです。

フルページモードで実行および表示して、機能することを確認することをお勧めします。

enter image description here

body {
    display: grid;
    /* Replace 80 with your footer height, or with auto for variable-height footers */
    grid-template-rows: 1fr 80px;
    /* These two are important */
    min-height: 100vh;
    position: relative;
}

#topnav {
  background-color: black;
  color: white;
  /* Recommended by Google, but adjust as you see fit */
  min-height: 64px;
  position: fixed;
  right: 100%;
  top: 0;
  width: 100%;
  /* This is to ensure that it always appears above everything. */
  z-index: 100;
  left: 0;
}

#page-content {
    grid-row: 1;
    /* https://css-tricks.com/preventing-a-grid-blowout/ */
    min-width: 0;
    /* change as you see fit */
    padding-bottom: 64px;
    padding-top: 64px;
}

#page-footer {
    background: black;
    bottom: 0;
    color: white;
    display: flex;
    grid-row: 2;
    height: 80px;
    position: absolute;
    width: 100%;
}
<body>
    <header>
        <nav id="topnav">topnav stuff goes in here</nav>
    </header>
    <main id="page-content">
        <h1>Page content goes here</h1>
    </main>
    <footer id="page-footer" class="container">
        <div>Made by Name</div>
    </footer>
</body>
1
AleksandrH

ブートストラップには、使用できる粘着性のあるフッターがあります。

http://getbootstrap.com/examples/sticky-footer/

または、CSSとjQueryを使用してそれを行うこともできます。

https://css-tricks.com/snippets/css/sticky-footer/

お役に立てば幸いです。

1
Laurie Williams