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 th开发者_运维技巧e full page width isn't filled with this css code.

Any help? Thanks!

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.

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

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.

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

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!

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

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.

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

I was facing same issue and solved it with using jquery.

<body>
    <div id="header" style="background-color: green">This is header</div>
    <div id="main-body" style="background-color: red">This is body</div>
    <div id="footer" style="background-color: grey">This is footer</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
if(($(document).height() - $("body").height()) > 0){
    var main_body_height = $(document).height() - $("#footer").height() - $("#header").height()
    $('#main-body').css('min-height', main_body_height+'px');
}
</script>

What I'm doing here is based on the Screen size of the User.
I'm increasing the main-body section height after subtracting the height of header and footer from it. If the complete html body height is less then the user screen size then it will increase the main-body section height and automatically footer will reach the bottom of page.