回答編集履歴
1
improve answer
test
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
+
フッターの上に余白ができてしまう原因は、`html` 要素の高さが足りない状態で、`footer`が固定配置で最下部に固定されているからで、足りない分が空白になっています。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
ページ内のコンテンツが増えてきて、高さが自然に viewport よりも大きくなれば問題ないですが、今の状態ではコンテンツがないので、`html`と`body`の高さを指定してあげる必要があります。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
1
|
-
ウィンドウサイズ
|
|
9
|
+
また、空白領域の高さをウィンドウサイズが変わっても柔軟に埋めたい場合は、絶対配置よりも Flexbox を使うとシンプルに実装できて対応しやすいと思いました。
|
|
10
|
+
|
|
11
|
+
[flex - CSS MDN](https://developer.mozilla.org/ja/docs/Web/CSS/flex)
|
|
2
12
|
|
|
3
13
|
|
|
4
14
|
|
|
@@ -105,3 +115,9 @@
|
|
|
105
115
|
実際に動くサンプルを作りましたので、参考までにはっておきます。
|
|
106
116
|
|
|
107
117
|
[サンプルコード](https://codepen.io/shgtkshruch/pen/WNvpjEe?editors=1100)
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
もし、`footer`の高さが決まっているのであれば、`calc`などを使うと絶対配置でもスタイリングできると思います。
|
|
122
|
+
|
|
123
|
+
[calc() - CSS MDN](https://developer.mozilla.org/ja/docs/Web/CSS/calc)
|