將頁腳固定在頁面底部

[英]Fix footer to bottom of page


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 its container to fix to the bottom using some of those examples right there.

我嘗試過很多方法,比如底部:0x;位置:絕對位置:等等。看起來從來都不是很好,偶爾用一些例子把頁腳從容器中推出來固定到底部。

Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a <section id="footer"> div anyway.

包括頁腳(頁腳和版權欄)的HTML和CSS。它們都在

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.

我去掉了讓它粘住的嘗試,這樣人們現在就可以看到它,看看當前的代碼要修改什么。

Live URL - http://www.mangdevelopment.co.uk/nakedradish

住URL http://www.mangdevelopment.co.uk/nakedradish

(It's a resturant website. Don't worry about the word 'naked').

(這是一個餐館的網站。不要擔心“赤裸”這個詞)。

HTML

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:

CSS:

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

12 个解决方案

#1


52  

For your footer:

為你的頁腳:

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

For your 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

jsFiddle演示

#2


7  

Like this add position:fixed; and bottom:0; below the selector #footer:

這樣添加的位置:固定;和底部:0;選擇以下#頁腳:

demo

演示

CSS

CSS

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

#3


4  

We can use FlexBox for Sticky Footer and Header without using POSITIONS in CSS.

我們可以使用FlexBox的粘性頁腳和頁眉不使用位置在CSS。

HTML

HTML

<div class="container">
  <header>HEADER</header>
  <main class="content">

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

CSS

CSS

.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;
}

DEMO - JSFiddle

演示——JSFiddle

Note : Check browser supports for FlexBox. caniuse

注意:檢查瀏覽器對FlexBox的支持。caniuse

#4


3  

Here's a simple CSS solution that'll work:

下面是一個簡單的CSS解決方案:

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

#5


2  

set

html, body { height: 100%; }

html, body{高度:100%;}

wrap the entire content before the footer in a div.

在div中頁腳之前包裝整個內容。

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

.wrapper {高度:汽車!重要;最小高度:100%;}

You can adjust min-height to your liking based on how much of the footer you want to show in the bottom of the browser-window. If set it to 90%, 10% of the footer will show before scrolling.

您可以根據您希望在瀏覽器窗口的底部顯示多少頁腳來調整最小的高度。如果設置為90%,10%的頁腳會在滾動之前顯示出來。

#6


2  

CSS

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

HTML

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

#7


1  

Duplicated (or N-plicated to be correct) question, however read this http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

重復的(或n次的)問題,但是請閱讀http://matthewjamestaylor.com/blog/keepingfooter -at-the-bottom- page

#8


0  

I've found the sticky footer solution a bit painful on responsive sites, given that the height of your nav and footer can differ depending on the device. If you only care about working on modern browsers, you can accomplish your goal using a bit of Javascript.

我發現粘性頁腳解決方案對響應性網站有點痛苦,因為你的nav和頁腳的高度可以根據設備的不同而不同。如果您只關心在現代瀏覽器上工作,那么您可以使用一些Javascript實現您的目標。

If this is your HTML:

如果這是你的HTML:

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

Then use this JQuery on every page:

然后在每個頁面上使用這個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();
  }
});

#9


0  

Your footer element won't inherently be fixed to the bottom of your viewport unless you style it that way.
So if you happen to have a page that doesn't have enough content to push it all the way down it'll end up somewhere in the middle of the viewport; looking very awkward and not sure what to do with itself, like my first day of high school.

頁腳元素不會固有地固定在viewport的底部,除非您以這種方式對其進行樣式化。如果你碰巧有一個頁面沒有足夠的內容把它往下推它就會在viewport的中間;看起來很尷尬,不知道該怎么做,就像我上高中的第一天。

Positioning the element by declaring the fixed rule is great if you always want your footer visible regardless of initial page height - but then remember to set a bottom margin so that it doesn't overlay the last bit of content on that page. This becomes tricky if your footer has a dynamic height; which is often the case with responsive sites since it's in the nature of elements to stack.

如果無論初始頁面高度如何,您總是希望頁腳可見,那么通過聲明固定規則來定位元素是很好的——但是請記住要設置一個底部空白,這樣它就不會覆蓋頁面上的最后一點內容。如果你的頁腳有一個動態的高度,這就變得很棘手;響應性站點通常是這樣的,因為它是元素的本質。

You'll find a similar problem with absolute positioning. And although it does take the element in question out of the natural flow of the document, it still won't fix it to the bottom of the screen should you find yourself with a page that has little to no content to flesh it out.

你會發現絕對定位也有類似的問題。雖然它確實把有問題的元素從文檔的自然流中去掉了,但是如果你發現自己的頁面幾乎沒有內容來充實它,它仍然不會把它固定在屏幕的底部。

Consider achieving this by:

考慮實現的:

  1. Declaring a height value for the <body> & <html> tags
  2. 聲明 & 標記的高度值。
  3. Declaring a minimum-height value to the nested wrapper element, usually the element which wraps all your descendant elements contained within the body structure (this wouldn't include your footer element)
  4. 將最小高度值聲明給嵌套的包裝器元素,通常是將包含在主體結構中的所有子代元素(不包括頁腳元素)包裝起來的元素

Code Pen Example

筆的例子代碼

$("#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>

#10


0  

The Footer be positioned at the bottom of the page, but not fixed.

頁腳位於頁面底部,但不是固定的。

CSS

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

<html>
   <head></head>
   <body>        
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>     
   </body>
</html>  

#11


0  

A very simple example that shows how to fix the footer at the bottom in your application's layout.

一個非常簡單的例子,說明了如何在應用程序的布局中修復底部的頁腳。

/* 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>

#12


-1  

Here is a solution without using position and works perfect on every browser: Keeping the footer at the bottom

這里有一個不用位置的解決方案,在每個瀏覽器上都很好用:把頁腳放在底部


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/09/20/31fae5123d51c8879942b15820342a07.html



 
  © 2014-2022 ITdaan.com 联系我们: