web-dev-qa-db-ja.com

ページの下部にフッターを修正

私のサイトのほとんどのページには、ほとんどの人がフッターをページの一番下にプッシュするのに十分なコンテンツがあります。とにかくこれからは画面サイズに関係なく常に下に固定されていることを知りたい。

0x;position:absolute:など、いくつかの方法を試しました。非常にうまく機能していないようです。フッターをコンテナから押し出して、それらの例をいくつか使用して下部に固定することがありますそこ。

フッターの2つの部分（フッターと著作権バー）のHTMLとCSSが含まれています。とにかく両方とも<section id="footer">divの中にあります。

人々がすぐにそれを見て、現在のコードが修正されるものを見ることができるように、私はそれを固執させる試みを取り除いた。

ライブURL- http://www.mangdevelopment.co.uk/nakedradish

（それはレストランのウェブサイトです。「裸」という言葉を心配しないでください）。

HTML

<section id="footer">
  <div class="container">
    <div class="row">
      <div class="span1">
        <div id="small-logo">
          <img src="img/small-logo.png" />
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR BOXES</h6>
          <ul>
            <a href="#">
              <li>Classic Box</li>
            </a>
            <a href="#">
              <li>Vegetarian Box</li>
            </a>
            <a href="#">
              <li>Family Box</li>
            </a>
            <a href="#">
              <li>Dinner Party Box</li>
            </a>
            <a href="#">
              <li>Gift Box</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR RECIPES</h6>
          <ul>
            <a href="#">
              <li>Last Weeks Feature</li>
            </a>
            <a href="#">
              <li>Next Weeks Feature</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>ABOUT US</h6>
          <ul>
            <a href="#">
              <li>The Food</li>
            </a>
            <a href="#">
              <li>How We Sourcex</li>
            </a>
            <a href="#">
              <li>Sustainability</li>
            </a>
            <li><a href="about.html">About Us</a></li>
            <a href="#">
              <li>Contact Us</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span5">
        <div id="Twitter">
          <img src="img/Twitter-logo.png" alt="" title="" height="50" width="50" class="Twitter-logo" />
          <div class="Tweet-bg">
            <div class="tweets">
              <p>@chefallanp that's just not on really</p>
            </div>
            <div id="follow-btn">
              <img src="img/follow-us.jpg" />
            </div>
          </div>
        </div>
        <div class="checkout-options">
          <h6>SECURE CHECKOUT</h6>
          <ul>
            <li><img src="img/solo-logo.png" /></li>
            <li><img src="img/switch-logo.png" /></li>
            <li><img src="img/maestro-logo.png" /></li>
            <li><img src="img/visa-logo.png" /></li>
            <a href="#">
              <li><img src="img/facebook-logo.png" /></li>
            </a>
            <a href="#">
              <li><img src="img/Twitter-logo-flat.png" /></li>
            </a>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="copyright-bar">
  <div class="container">
    <div class="row">
      <div class="copyright-content">
        <div class="span4">
          <p>The Naked Radish Limited. 2013 All rights reserved.</p>
        </div>
        <div class="span4 offset4">
          <div class="copyright-list">
            <ul>
              <a href="terms.html">
                <li>Terms &amp; Conditions</li>
              </a>
              <a href="privacy.html">
                <li> - Privacy Policy</li>
              </a>
              <a href="#">
                <li> - Cookie Policy</li>
              </a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS：

#footer {
    background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;
}
htmlcssfooter
40
mcvities

あなたのfooter：

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

あなたのbody：

body {
    margin-bottom:50px;
}

#footer {
  background-color: red;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  margin-bottom: 0px;
}

div {
  margin: 20px 20px;
}

body {
  margin-bottom: 50px;
}
<div>
  Although most pages on my site have enough content to Push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom:
  0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright
  bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to Push the footer to the
  bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally
  pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts
  at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to Push the footer to the bottom of the page for most people. I would like to know it's always
  fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using
  some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and
  see what the current code is to amend. Although most pages on my site have enough content to Push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.
  I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for
  the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site
  have enough content to Push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc.
  Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside
  of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to Push the footer to the bottom of the page for most
  people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's
  container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people
  can have a look at it right now and see what the current code is to amend.
</div>
<div id="footer">
  This is footer
</div>

jsFiddle Demo

64
Girish Thimmegowda

CSSでPOSITIONSを使用せずに、StickyFooterおよびHeaderにFlexBoxを使用できます。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  height: 50px;
  flex-shrink: 0;
  background-color: #037cf5;
}

footer {
  height: 50px;
  flex-shrink: 0;
  background-color: #134c7d;
}

main {
  flex: 1 0 auto;
}
<div class="container">
  <header>HEADER</header>
  <main class="content">

  </main>
  <footer>FOOTER</footer>
</div>

デモ-JSFiddle

Note：FlexBoxのブラウザサポートを確認してください。 caniuse

12
bala.tamizh

このように、セレクターposition:fixed;の下にbottom:0;と#footerを追加します。

デモ

CSS

#footer {
    background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;
    position:fixed;
    bottom:0;
    width:100%;
}
8
Falguni Panchal

動作する簡単なCSSソリューションを次に示します。

#fix-footer{
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 35px;
    width: 100%;
    background: #1abc9c;
}
3
user3765658

セットする

html, body {
    height: 100%;
}

Divのフッターの前にコンテンツ全体をラップします。

.wrapper {
    height:auto !important;
    min-height:100%;
}

ブラウザウィンドウの下部に表示するフッターの量に基づいて、必要に応じて最小高さを調整できます。 90％に設定すると、スクロールする前にフッターの10％が表示されます。

3
JacobJuul

CSS

html {
    height:100%;
}
body {
    min-height:100%; position:relative;
}
.footer {
    background-color: rgb(200,200,200);
    height: 115px;
    position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }

HTML

<div class="header">...</div>
<div class="content">...</div>
<div class="footer"></div>
<div class="footer-ghost"></div>
2
Vial

重複した（または正確にNに重複した）質問、ただしこれを読んでください http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

1
bodi0

ナビゲーションとフッターの高さはデバイスによって異なる可能性があるため、応答性の高いサイトではスティッキーフッターソリューションが少し痛いことがわかりました。最新のブラウザでの作業にのみ関心がある場合は、少しのJavaScriptを使用して目標を達成できます。

これがHTMLの場合：

<div class="nav">
</div>
<div class="wrapper">
</div>
<div class="footer">
</div>

次に、すべてのページでこのJQueryを使用します。

$(function(){

  /* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
  function setWrapperMinHeight() {
    $('.wrapper').css('minHeight', window.innerHeight - $('.nav').height() - $('.footer').height());
  }
  /* Make sure the main div gets resized on ready */
  setWrapperMinHeight();

  /* Make sure the wrapper div gets resized whenever the screen gets resized */
  window.onresize = function() {
    setWrapperMinHeight();
  }
});
0
Perry Rosenstein

アプリケーションのレイアウトの下部にあるフッターを修正する方法を示す非常に簡単な例。

/* Styles go here */
html{ height: 100%;}
body{ min-height: 100%; background: #fff;}
.page-layout{ border: none; width: 100%; height: 100vh; }
.page-layout td{ vertical-align: top; }
.page-layout .header{ background: #aaa; }
.page-layout .main-content{ height: 100%; background: #f1f1f1; text-align: center; padding-top: 50px; }
.page-layout .main-content .container{ text-align: center; padding-top: 50px; }
.page-layout .footer{ background: #333; color: #fff; } 
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="page-layout">
      <tr>
        <td class="header">
          <div>
            This is the site header.
          </div>
        </td>
      </tr>
      <tr>
        <td class="main-content">
          <div>
            <h1>Fix footer always to the bottom</h1>
            <div>
              This is how you can simply fix the footer to the bottom.
            </div>
            <div>
              The footer will always stick to the bottom until the main-content doesn't grow till footer.
            </div>
            <div>
              Even if the content grows, the footer will start to move down naturally as like the normal behavior of page.
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="footer">
          <div>
            This is the site footer.
          </div>
        </td>
      </tr>
    </table>
  </body>

</html>
0
Deepak Kumar

FlexとBootstrap4を使用する（Bootstrap4を使用しない場合、flexプロパティを使用して同じ結果を得ることができます）

<body class="d-flex flex-column">
    <div>Header</div>
    <div>Main container</div>
    <div class="mt-auto">Footer</div>
</body>
0
jose.serapicos

フッター要素は、そのようにスタイル設定しない限り、本質的にビューポートの下部に固定されません。
そのため、ページを完全にプッシュするのに十分なコンテンツを持たないページがある場合、ビューポートの中央のどこかに配置されます。高校の初日のように、非常にぎこちなく、自分自身で何をすべきかわからない。

fixedルールを宣言して要素を配置するのは、最初のページの高さに関係なく常にフッターを表示したい場合に最適です。 。フッターの高さが動的な場合、これは扱いにくいものになります。レスポンシブサイトの場合は、スタックする要素の性質にあるため、よくあります。

absoluteポジショニングでも同様の問題が見つかります。また、問題の要素をドキュメントの自然な流れから取り除きますが、それを具体化するコンテンツがほとんどまたはまったくないページを見つけても、画面の下部にそれを修正しません。

これを達成することを検討してください：

  1. <body>＆<html>タグの高さの値を宣言する
  2. ネストされたラッパー要素へのminimum-height値の宣言。通常、body構造内に含まれるすべての子孫要素をラップする要素です（これにはfooter要素は含まれません）

コードペンの例

$("#addBodyContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".flex-col:first-of-type");
});

$("#resetBodyContent").on("click", function() {
  $(".flex-col p").remove();
});

$("#addFooterContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo("footer");
});

$("#resetFooterContent").on("click", function() {
  $("footer p").remove();
});
html, body {
    height: 91%;
}

.wrapper {
    width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 10px;
    display: block;
    min-height: 100%;
}

footer {
    background: black;
    text-align: center;
    color: white;
    box-sizing: border-box;
    padding: 10px;
}

.flex {
    display: flex;
    height: 100%;
}

.flex-col {
    flex: 1 1;
    background: #ccc;
    margin: 0px 10px;
    box-sizing: border-box;
    padding: 20px;
}

.flex-btn-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.btn {
    box-sizing: border-box;
    padding: 10px;
    transition: .7s;
    margin: 10px 10px;
    min-width: 200px;
}

.btn:hover {
    background: transparent;
    cursor: pointer;
}

.dark {
    background: black;
    color: white;
    border: 3px solid black;
}

.light {
    background: white;
    border: 3px solid white;
}

.light:hover {
    color: white;
}

.dark:hover {
    color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="flex-btn-wrapper">
        <button id="addBodyContent" class="dark btn">Add Content</button>
        <button id="resetBodyContent" class="dark btn">Reset Content</button>
    </div>
    <div class="flex">
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    </div>
    </div>
<footer>
    <div class="flex-btn-wrapper">
        <button id="addFooterContent" class="light btn">Add Content</button>
        <button id="resetFooterContent" class="light btn">Reset Content</button>
    </div>
    lorem ipsum dolor...
</footer>
0
UncaughtTypeError

フッターはページの下部に配置されますが、固定ではありません。

CSS

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;  
  padding: 0;
}
#header {
  background: #595959;
  height: 90px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: #595959;
}

HTML

<html>
   <head></head>
   <body>        
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>     
   </body>
</html>
0
D.Y.