画面下部の固定フッターを、画面最下部と重ならないよう、同じ高さの空白を作りたい

Question

実現したいこと

画面下部に固定しているフッタ―があり、それが画面の最下部までスクロールされたときに
画面最下部の表示に重ならないようにしたいです。
画面最下部にフッターと重ならないように空白を入れようとしています。
その空白は、動的に固定フッターと同じ高さにしたいです。

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

固定フッターの高さは、中身に応じて変えたいので、「height: auto;」にしています。
その固定フッターの高さを基準に、最下部の空白と親要素のdivの高さも同じになるようにしたいのですが、
「height: 100%;」や「height: auto;」などを指定しても、高さが0pxになってしまいます。

該当のソースコード

<style>
.fixed_footer {
	position: fixed;
	width: 100%;
	height: auto;
	left: 0px;
	bottom: 0px;
}
.push { height: auto; }
.wrapper { position: relative; }
</style>

<div class="wrapper">
	<div class="push"></div><!-- 重なり防止の画面最下部の空白 -->
	<div class="fixed_footer"><!-- 固定フッター-->
		<!-- 中身のコンテンツ -->
	</div>
</div>

試したこと

・「fixed_footer」クラスの内容を「wrapper」の中に移してみたが、NG
・「push」クラスの高さを100%にしてみたが、NG

ご回答、よろしくお願いいたします。

Answer 1

position: fixed;を設定した要素は通常フローから外れるので、CSSでその高さを取得するのは無理だと思います。

JavaScriptで「fixed_footer」クラスの高さを取得して、それを bodyの padding-bottom に設定することになると思います。

Comments

[O_Y]

ありがとうございます！
CSSでやることが必須ではなかったので、こちらで解決いたしました。

Answer 2

position:sticky;でいけませんかね？

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {/*fixed_footer手前の要素*/
  flex: 1;
  overflow-x: hidden;
  margin:3em;
}
.fixed_footer{
  background: tomato;
  position:sticky;
  bottom:0;
}
body{
  margin:0;
}

stickyサンプル

Comments

[O_Y]

ご教示ありがとうございます。
以下のように変更してみましたが、まだ解決には至りませんでした。
固定フッターが、画面の最下部あたりまでスクロールしないと見えなくなってしまいました。
コードは以下です。
※ご教示いただいた内容と異なっていたら申し訳ありません。

```
<style>
body { margin: 0; }
.fixed_footer {
position: sticky;
width: 100%;
height: auto;
left: 0px;
bottom: 0px;
}
.push {
flex: 1;
overflow-x: hidden;
margin: 3em;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
</style>

<div class="wrapper">
<main class="push"></main><!-- 重なり防止の画面最下部の空白 -->
<div class="fixed_footer"><!-- 固定フッター -->
<!-- 中身のコンテンツ -->
</div>
</div>
```

[recal]

mainにclass="push"を付与してみましたが固定フッターが見えなくなる現象を再現できませんでした。
ちなみにサンプルページの物は最下部固定表示されていますか？それとも同じようにスクロールしないとフッターは表示されませんか？

質問は編集出来ますので、再現出来るコードを追記してもらうことは可能でしょうか？
それかjsで書いちゃったほうが早いかもしれないですね。

[O_Y]

CSSでの対応が難しそうでしたので、JavaScriptで対応することにしました。
ご対応ありがとうございました。