How to make a footer fixed in the page bottom

问题

In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.

I am currently using this CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

But the full page width isn't filled with this css code.

Any help? Thanks!

回答1:

I use sticky footer: http://ryanfait.com/sticky-footer/

/*

    Sticky Footer by Ryan Fait
    http://ryanfait.com/

    */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

Essentially, the wrapper is 100% height, with a negative margin the height of the footer ensuring the footer is always at the bottom without causing scroll.

This should accomplish your goal of having a 100% width footer and narrower body as well, because divs are block level elements, and their width is by default 100% of their parent. Keep in mind the footer here is not contained by the wrapper div.

回答2:

you could make the footer div absolute to the page like this:

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}

回答3:

I use a few DIV elements for each section of my webpages.

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.

I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.

回答4:

if you want that your footer be fixed on your page :

.footer{ position:fixed;}

but if you want your footer fixed end of page :

see that

回答5:

I'm glad for the support you all provided, each one of these replies helped me somehow. I came to this code:

.footer {
  height: 59px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  top: 508px;
}

Thanks!

回答6:

This issue i have came cross when I started an web application using Bootstrap menu and fixed footer irrespective of browser resolution.

Use below styling for footer element

In-line style

External style sheet using class attribute in Div

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

style.css

  .footer
  {
   backgroud-color:black;
   position:fixed;
   bottom:0;
   height:2%;
  }

External style sheet using id attribute in Div

 <div id="divfooter"></div>

style.css

 #divfooter
 {
  backgroud-color:black;
  position:fixed;
  bottom:0;
  height:2%;
 }

回答7:

You can use this styles in your CSS to achieve your goal

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.

回答8:

html:

<div class="footer">
    <p>
        Some text comes here! &copy; 2015 - 2017
    </p>
</div>

css:

.footer {
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(59, 67, 79);
    position: fixed;
    bottom: 0%;
    margin-top: 50%;
}

* {
    padding: 0;
    margin: 0;
}

来源：https://stackoverflow.com/questions/5189238/how-to-make-a-footer-fixed-in-the-page-bottom

标签

css

footer