15

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!

Ian
  • 391
  • 1
  • 17
rodrigoalvesvieira
  • 7,895
  • 15
  • 63
  • 84
  • `width:100%` maybe? Oh also you can use `margin:0em;` instead of setting the four values. – JCOC611 Mar 04 '11 at 03:23
  • Another detail I forgot: I want the content of the page to be width: 850px and the footer to occupy 100% of the page width. How do I do that? – rodrigoalvesvieira Mar 04 '11 at 03:33
  • possible duplicate of [CSS: fixed to bottom and centered](http://stackoverflow.com/questions/971123/css-fixed-to-bottom-and-centered) – ChrisF Mar 02 '13 at 11:34

9 Answers9

22

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.

Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
Chris Sobolewski
  • 12,819
  • 12
  • 63
  • 96
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 */
}
Jason
  • 2,687
  • 3
  • 29
  • 40
  • 2
    The problem with this is that the content of the page will flow underneath the footer. You would need a `DIV` to create a gap at the bottom of the page for the footer, so it doesn't overlap. – Jared Mar 04 '11 at 05:27
1

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.

Jared
  • 2,978
  • 4
  • 26
  • 45
0

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

8611670474
  • 344
  • 1
  • 3
  • 12
0

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%;
 }
Kuntady Yathish
  • 49
  • 2
  • 10
0

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.

Isaac Shrestha
  • 15
  • 7
0

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;
}
kob
  • 1
  • 2
  • 1
    While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Donald Duck Jan 15 '17 at 11:51
0

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!

Jared Nielsen
  • 3,669
  • 9
  • 25
  • 36
rodrigoalvesvieira
  • 7,895
  • 15
  • 63
  • 84
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.

Satish51
  • 119
  • 6