ボタンを押すことで表示するフッターを実装したのですが、フッター上のコンテンツ量が多いとフッターが画面外にはみ出してしまいます。

前提

下記サンプルをご確認いただけますでしょうか。
サンプルA
フッターにある「表示」ボタンを押すと、フッターのコンテンツが下から上へ移動しながら表示されます。
上記のサンプルAは一応私の希望通りの動きになっています。

発生している問題

上記サンプルのフッター上、「コンテンツA」のコンテンツ量が増えると、フッターの領域が画面外にはみ出てしまい、フッターの「表示」ボタンが押せなくなってしまいます。

下記のサンプルは、コンテンツ量が多くフッターがはみ出してしまった場合のサンプルです。
サンプルB

実現したいこと

「コンテンツA」のコンテンツ量が増えても、「コンテンツA」の後にフッターのコンテンツを表示できるようにしたいです。

また、フッターコンテンツの表示と非表示によってスクロールバーが動くことなく、サンプルAのフッターのようにあらかじめフッターコンテンツを表示する領域を常に確保した状態にしたいです。

該当のソースコード

html
1<body>
2  <div id="wrap">
3    <div id="block">
4      <h2>コンテンツA</h2>
5      <p>コンテンツ</p>
6      <p>コンテンツ</p>
7      <p>コンテンツ</p>
8      <p>コンテンツ</p>
9      <p>コンテンツ</p>
10      <p>コンテンツ</p>
11      <p>コンテンツ</p>
12    </div>
13    <footer>
14      <input type="checkbox" id="check" />
15      <label for="check">
16        <p id="visibleBtn">表示<p>
17      </label>
18      <div id="footerCont">
19        <p>コンテンツ</p>
20        <p>コンテンツ</p>
21      </div>
22    </footer>
23  </div>
24</body>

css
1body {
2  background: black;
3  overflow: hidden;
4}
5p {
6  margin-bottom: .5rem;
7}
8#wrap {
9  text-align: center;
10  position: fixed;
11  top: 0;
12  left: 0;
13  width: 100vw;
14  height: 100vh;
15  display: flex;
16  flex-direction: column;
17  box-sizing: border-box;
18  padding: 1rem 5%;
19  overflow-y: auto;
20}
21#block {
22  background: tomato;
23  width: 100%;
24  box-sizing: border-box;
25  margin: auto;
26  padding: 1rem 0;
27}
28
29footer {
30  background: steelblue;
31  padding: 1rem 0;
32  overflow-y: hidden;
33}
34#check{
35  display: none;
36}
37#check:checked ~ * p {
38  transform: translateY(0);
39}
40#check:checked ~ * div {
41  visibility: visible;
42  transform: translateY(0);
43}
44#visibleBtn {
45  background: white;
46  width: 3rem;
47  margin: 0 auto;
48  padding: .3rem;
49  transform: translateY(4rem);
50  transition: .2s;
51  cursor: pointer;
52}
53#footerCont {
54  visibility: hidden;
55  transform: translateY(4rem);
56  transition: .2s;
57}
58
59

試したこと

footerのスタイルに設定してあるoverflow-y: hidden;を削除すると、コンテンツ量が増えてもサンプルAのフッターのように、フッターコンテンツを表示できる分の領域を確保できました。
しかし、フッターコンテンツを表示するとフッター下の余白が減りページ全体のサイズが変わるためか、スクロールバーの位置が変わってしまいます。

下記サンプルはoverflow-y: hidden;を削除した場合のサンプルです。
サンプルC

追記ループアニメーション追加

サンプルD

ループアニメーションのコピペ元
CodePen Home
Star animation CSS

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

回答1件

ベストアンサー

最終的にどうしたいのかよく分かりませんが、body に overflow: hidden; を付けたりとか、全体を覆う #wrap に position: fixed; を付けたりとか、それぞれの意味を考えたら矛盾していることに気づくはずです。
全体のセンタリングもpaddingでせずにmarginでするのがセオリーです。

他にもいろいろおかしなところが目につきます。
とりあえずおかしなところを修正しましたのが下記です。
これをたたき台にして、ご希望と違うところを修正していきましょう。

css
1body {
2  background: black;
3/*  overflow: hidden; */
4}
5p {
6  margin-bottom: .5rem;
7}
8#wrap {
9  text-align: center;
10/*  position: fixed;
11  top: 0;
12  left: 0; */
13  width: 90vw; /*100vwから修正*/
14/*  height: 100vh; */
15  display: flex; 
16  flex-direction: column;
17  box-sizing: border-box;
18/*  padding: 1rem 5%; */
19  margin: 1rem auto; /*追加*/
20/*  overflow-y: auto; */
21}
22#block {
23  background: tomato;
24  width: 100%;
25  box-sizing: border-box;
26  margin: auto;
27  padding: 1rem 0;
28}
29footer {
30  background: steelblue;
31  padding: 1rem 0;
32  overflow-y: hidden;
33  width: 90vw; /*追加*/
34}
35#check{
36  display: none;
37}
38#check:checked ~ * p {
39  transform: translateY(0);
40}
41#check:checked ~ * div {
42  visibility: visible;
43  transform: translateY(0);
44}
45#visibleBtn {
46  background: white;
47  width: 3rem;
48  margin: 0 auto;
49  padding: .3rem;
50  transform: translateY(4rem);
51  transition: .2s;
52  cursor: pointer;
53}
54#footerCont {
55  visibility: hidden;
56  transform: translateY(4rem);
57  transition: .2s;
58}

投稿2020/01/18 15:44

hatena19

総合スコア33715

TofuLove

2020/01/19 00:17

ご回答ありがとうございます。修正いただいたCSSで希望通りの挙動になりました。セオリーではない書き方であったり無駄な記述が多いことが分かりました。改めましてありがとうございました。wrapにposition:fixedを設定している理由は、実際のページで背景にループアニメーションを施しておりまして、position:fixedまたはabsoluteを指定しないとループアニメーションがコンテンツwrapの上に描画されてしまうため、wrapにpositionプロパティを設定しています。positin:fixedまたはabsoluteを設定した場合のCSSもご教示いただけないでしょうか。