footer表示について

前提・実現したいこと

フッターの固定表示をしたいのですが手をつくしているのですがなかなかうまく表示されません…。

発生している問題・エラーメッセージ

何もない真っ白なフッターになってしまってます。

該当のソースコード

<main>
</main>

<footer>
  <nav class ="nav-inline" >
      <a>etc....</a>
  </nav>
</footer>

  </body>

</html>

<--------css--------->

* {
  margin:0; padding:0;
}

main{
  margin: 0;
   display: flex;
   flex-flow: column;
   min-height: 100vh;
}

footer{
  display:inline-block;    
  margin-top:35px;
  height:44px;
  width:100%;
}
.nav-inline a{
  width:100%;
  display:inline-block;
  text-align:center;
  justify-content: space-between;
  font-size:inherit;
  padding-top: 16px;
  padding-bottom:20px;
  position:fixed;
  z-index:2;

}

.li{
    list-style:none;

  }

試したこと

<li>から <a>の変更、

height,widhtの指定など…

補足情報（FW/ツールのバージョンなど）

ツール：ATOM

kei344

2020/09/14 04:11

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2020/09/14 04:20

fotterではなくfooterかと。

tsurutsuru649

2020/09/14 05:55

こんな単純なミスですみません。ありがとうございます。編集しましたが現在空白になってしまい苦戦してます。

行動規範の内容に同意します

回答3件

こんにちは。

「fotter」を「footer」に直してみてください。

投稿2020/09/14 04:10

kay-ws

総合スコア106

tsurutsuru649

2020/09/14 08:41

単純ﾐｽも含まれていました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

「フッターの固定表示をしたい」したいのなら、footer に position:fixed; を付けましょう。
また、画面の最下部に固定したいのだと思いますので、bottom: 0; で最下部固定です。

また、position:fixed; の要素には、margin は効きません。

css
1footer {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5/*  margin-top:35px; */
6  height:44px;
7  width:100%;
8  position:fixed;
9  bottom: 0;
10}