HTML5　footer　固定の仕方

締切済

質問者：retfglhyi
質問日時：2013/12/29 20:05
回答数：3件

ホームページを作っています。
ページはタブで切り替えられるようになっています。

footerを常に表示させたい（画面の下部に固定）と色々やってみましたがうまくいかないので質問します。
<div id="footer"></div>

(1)CSS

#footer{
position:fixed;
}

CSSで上のように書いてみました。
文章が少ないときは上に上がり(画面の下に固定されない)、
文章が多くてスクロールが必要なときは、footerが表示されません(要素としては存在しているがつぶれている状態)。

(2)footerFixed.js

ページの一番下に表示される（スクロールしないとfooterを見ることが出来ない）

という状態です。
なぜなのでしょうか？

他に方法はないでしょうか？
教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2013/12/30 18:20

語句簡単な例

※fixedを使うときは、隠れてしまう要素がないようにmarginを忘れず指定すること
　下記サンプルだと、section h2{margin-top:100px;}と#subsection3{margin-bottom:50px;}
　(下記サンプルのように)リキッドにするときは、fixedされた要素内で幅を指定すること

文字コードはUTF-8
★タブは＿に置換してあるので戻す。
★リキッドなので、スマホのような小さな画面から幅広ディスプレイまで、このままで利用できる。
<!doctype html>
<html>
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿＿記事
＿＿</p>
＿＿<section id="subsection1">
＿＿＿<h3>A smaller heading</h3>
＿＿＿<p>
＿＿＿＿記事
＿＿＿</p>
＿＿</section>
＿＿<section id="subsection2">
＿＿＿<h3>A smaller heading</h3>
＿＿＿<p>
＿＿＿＿記事
＿＿＿</p>
＿＿</section>
＿＿<section id="subsection3">
＿＿＿<h3>A smaller heading</h3>
＿＿＿<p>
＿＿＿＿記事
＿＿＿</p>
＿＿</section>
＿＿<aside>
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="#subsection1">1</a></li>
＿＿＿＿<li><a href="#subsection1">2</a></li>
＿＿＿＿<li><a href="#subsection1">3</a></li>
＿＿＿</ol>
＿＿＿
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</footer>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2013/12/30 14:43

HTML5だと

<div id="footer"></div>じゃなくて、<footer></footer>でしょう。
div要素は、原則使いません。
Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )--著者は他に適切な要素がないときの最後の手段として、div要素を使用することを強く推奨する。
　また、後方互換でHTML4.01を使用するにしてもidじゃなく、せいぜいclassでしょう。なぜならfooterは文書の随所に登場しうる要素ですから・・

　CSSにおいてposition:fixedは、他の要素から切り離されます。位置(top,bottom,left,right)やサイズはabsoluteと異なり閲覧領域を参照します。
　⇒9.3 位置決め方式( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )