问题描述:

i am trying to fix the position of the footer at the bottom of the page.

following is the code of css

.footer {

position: fixed;

bottom: 0;

width: 100%;

height: 25px;

}

but it is not working but when i use id for these properties it works.

#footer {

position: fixed;

bottom: 0;

width: 100%;

height: 25px;

}

Question is why i am not able to use class for fixing the position of the footer in the bottom of the page. Are these some rules for these properties. Please advise.

Here is the html code for the above css

<div class="footerBar" style="">

<label class="control-label" style="color: white">Copyright 2007-2017 </label>

<label class="control-label" style="float: right;margin-right: 10px;font-weight: bold;color: white">{{version}}</label>

</div>

and i am using the div in another div as follow

<div id="footer"><!-- calling of class for footer doesn't work for me here -->

<footer-outlet></footer-outlet>

</div>

网友答案:

try with snippet both are working fine

.footer {position:fixed;bottom:0;width:100%;height:100px;background:#000;
}
<div class="footer">
    <footer-outlet></footer-outlet>
</div>
网友答案:

As I can see issue is in class name, use footerBar instead of footer

body{
  height:800px;
}
.footerBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 25px;
  background:#000;
}
<div class="footerBar">
  <label class="control-label" style="color: white">Copyright 2007-2017</label>
  <label class="control-label" style="float: right;margin-right: 10px;font-weight: bold;color: white">{{version}}</label>
</div>
网友答案:

As per your question, you are not making use of correct class in your html, which has the style in the css. It is due to this, the styles in the footer doesn't gets applied.

Error: Using footerBar in the html.

Correction: (either of the two)

  1. Use .footer in the html, that has the styles properties in the CSS.
  2. Modify the class in the CSS with .footerBar, so that it represents the same as that of the html.

Reason why id was working?

The id was working because you have represented both in html and css with the same and correct id name.

Refer to the link, where it works well.

相关阅读:
Top