Footerを画面の１番下に配置したいが固定したくない

Footerを画面の１番下に配置したいが固定したくないです。

<!DOCTYPE html>
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<style>
body , html {
    height: 100%;
}
 
#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    background-color: yellow;
}

#contents {
    padding-bottom: 100px;
    background-color: blue;
}
 
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: red;
}

</style>

</head>

<body>

<div id="container">
<div id="header">ヘッダー</div>
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>


</body>
</html>

とコードを書きました。

今の状態で実行すると、コンテンツの要素がどんなに増えてもフッターが常に画面に表示されます。
フッターを常に画面に表示はせず、一番下にスクロールした時のみフッターを表示させたいです。その時フッターは画面の一番下にぴったり配置させたいです。

    position: fixed;

がその役割をしているとは思うのですが、これをつけるとフッターが固定されてしまいます。

どのようにcssを書き換えれば目的の画面が得られますか？

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

回答2件

ベストアンサー

こういうことですかね。

css
1
2body , html {
3    padding:0; /*　追加*/
4    margin:0; /*　追加*/
5    height: 100%;
6}
7
8/*中略*/
9
10#footer {
11    position: absolute; /*　変更*/
12    bottom: 0;
13    width: 100%;
14    height: 100px;
15    background-color: red;
16}

コンテンツ少ないとき

コンテンツ多いとき

投稿2018/06/26 07:51

m.ts10806

総合スコア80888

position等使わずとも、普通にコーディングしていれば最後の要素は最後に表示されるはずですが、、
コンテンツの高さが少ない時に、footerの下に余白ができてしまうことを回避したいのでしょうか？

footerのheightが100pxで固定であれば

lang
1
2#container {
3    width: 100%;
4    position: relative;
5    height: auto !important;
6    height: 100%;
7    min-height: 100%;
8    background-color: yellow;
9    padding-bottom: 100px; /*ここを追加*/
10}
11
12#contents {
13    /*padding-bottom: 100px;*/ /*ここを削除*/
14    background-color: blue;
15}
16
17#footer {
18    position: absolute; /*ここを変更*/
19    bottom: 0;
20    width: 100%;
21    height: 100px;
22    background-color: red;
23}
24