0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

フッターの位置の変更

Last updated at Posted at 2019-06-04

自分でサイトを作っていた時にこのようになってしまいました。footer problem.png

画像の中に入っている文字が実はフッター要素で記述している部分なんです。
しかし、main要素である画像の上に表示されています。
この問題をどう解決したかを説明します。

##position:absolute;を用いて、フッターの位置を下に固定する

pisition:absolute;
bottom:0;

このように記述することでフッターの位置を一番下に固定できます。
Taneppa! こちらのサイトを参考にさせていただきました。より詳しい解説はこちらをご覧ください。

##フッターの要素を取り出す
実は上の方法では私の問題は解決できませんでした。
そこで今回は,

<main>
 問題があったfooter内のcode
</main>

<footer>

<footer>

このように力技になりますがfooter内で書くことを諦め、mainタグ内の一番下に記述する。
その後上で説明したpositionで位置を固定することでフッターのように見せることが出来ました。
下が変更後のページになります。

footer improve.png

以上が私の解決策になります。
他の解決策があれば、アドバイスお願いいたします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?