カスタムクラスでフッターがその位置に固定されていません

Question

ページの下部にフッターの位置を固定しようとしています。次 は、CSS

.footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 25px; 
} 

のコードですが、それは動作していないが、私はこれらのプロパティのIDを使用する場合、それは動作します。

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 25px; 
} 

私はページの下部にフッターの位置を固定するためにクラスを使用できないのですか？これらのプロパティにはこれらの規則がありますか？お知らせ下さい。ここで

は、上記の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> 

のHTMLコードであるとの両方が動作しているスニペットをしてみてください

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

Answer 1

に従うように私は別のdivにdiv要素を使用しています細かい

.footer { 
 
\t position:fixed; 
 
\t bottom:0; 
 
\t width:100%; 
 
\t height:100px; 
 
\t background:#000; 
 
}

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

幅ID

#footer { 
 
\t position:fixed; 
 
\t bottom:0; 
 
\t width:100%; 
 
\t height:100px; 
 
\t background:#000; 
 
}

<div id="footer"> 
 
    <footer-outlet></footer-outlet> 
 
</div>

Answer 2

私の代わりに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>

Answer 3

の footerBarを使用し、問題はクラス名である見ることができるようにあなたの質問によると、 ではないあなたのhtmlで正しい classを使用しています。に styleがあります。 これが原因で、フッターのスタイルが適用されません。

エラー：footerBarをHTMLで使用しています。

訂正：htmlで（2のいずれか）

1. 使用.footer、CSSでスタイルのプロパティを持っています。
2. CSSのクラスを.footerBarに変更して、htmlと同じになるようにします。

なぜidが機能していたのですか？

idは、htmlとcssの両方に同じと正確なidという名前を使用しているため、動作していました。

linkを参照してください。ここではうまくいきます。