html - フッターを一番下に揃えるにはどうすればよいですか?

Question

私は CSS を初めて使用し、さまざまな方法を調べましたが、フッターを下部に揃えることができません。何か助けはありますか？ありがとうございました。

.footer {
    position: bottom;
    bottom: -10px;
    height: 30px;
    width: 100%;
    background-color: #171717;
    color: white;
}

Answer 1

位置を固定に変更します。

.footer {
    position:fixed;
    bottom:0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

Answer 2

フッターをプッシュできる他のdivなどがある場合に備えて、左のプロパティも追加します

.footer {
    position:absolute;
    bottom:0px;
    left: 0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

Answer 3

次のようなものを試してください。

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #171717;
    color: white;
}

これは動作中のライブデモです。

Answer 4

Codepen のデモ

HTML:

<div class="header">
  <h2>header</h2>
</div>
<div class="container">
  <h2>container</h2>
</div>
<div class="footer">
  <h2>footer</h2>
</div>

CSS:

body {
  height: 100%;
  width: 100%;
  display: table;
}
html {
  height: 100%;
}
.header {
  background: #f00;
  color:#fff;
  text-align: center;
}
.container {
  text-align: center;
}
.footer {
  background: #ff0;
  text-align: center;
  width: 100%;
  display: table-footer-group;
}