レスポンシブサイトの縦スクロールがスクロールされない

前提・実現したいこと

自作のポートフォリオサイトのレスポンシブ対応のでご質問させていただきます。

（現在の進捗）
PC用サイトは１画面（画面いっぱい）で作成し、自分なりには完成しました。
そこで今度は作成したサイトを元にスマホ、タブレッド用にレスポンシブ対応するためコーディングを行なっていますが、実際に作成したサイトをディベロッパーツールで確認するとサイトの縦スクロールされない状況です。
本来であればタブレット・スマートフォンサイトの場合は縦長のサイトであるため、headerからfooterまでスクロールされるはずですが、作成したサイトはfooterまでスクロールがされないようです。

自作サイトのURL

https://nixer18.github.io/index.html

→本来であればまだいくつかのページがありますが、今回はHOMEのページだけです。
※起きている状況はすべてのページ同じです。
※スマートフォンのレスポンシブはまだ作成しておりません。（タブレッドのみ）

試したこと

自分と同じエラーの方がいないかGoogleで調べました。

（調べた内容）
①
https://hacknote.jp/archives/25099/
→HTML要素に以下要素を追加する

css
1html {
2  -webkit-overflow-scrolling: touch;
3}

②
https://techacademy.jp/magazine/9428
→body要素に以下要素を追加する

css
1body {
2 overflow: scroll;
3}

最後に

もし可能でしたら、自分が作成したサイトのコーディング内容に関しまして、
お気づきの点や改善点などありましたら、合わせてご教示いただけるとありがたい所存です。
※完全独学で今回はじめてポートフォリオサイトの作成をしているからです。

以上、お手数ですがよろしくお願いいたします。

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

回答1件

ベストアンサー

サイトを拝見しましたがそもそも縦長になる要素がないと思います。
※質問にコード載せたほうがいいですよ、ある程度は。
「サイトのURL貼ってやるから問題点はそっちが探せよオラァ」って感じに見えます。

html
1<body>
2  <!--- Header --->
3  <div class="wrapper">
4    <header class="page-header">
5    </header>
6
7    <!--- Main  --->
8    <section class="main">
9    </section>
10
11    <!--- Footer --->
12    <footer>
13    </footer>
14  </div>
15</body>

css
1.main {
2    display: flex;
3    align-items: center;
4    text-align: center;
5    justify-content: center;
6    width: 100%;
7    min-height: 100vh;
8}

で画面の縦いっぱいに広がっていて
header,footerはposition:absolute;でtop:0;とbottom:0;で生えてくるので
どうあってもサイト画面は端末の画面よりほんのちょっと縦にはみ出る程度の高さになるので
スクロールできないというよりかコンテンツ自体のheightがないです。
スクロールするには端末の画面がheaderより短いぐらいじゃないとだめですね。

ここまで書いて思ったんですがコンテンツでなにかミスってるんですかね？アップし忘れとか？

投稿2020/06/15 10:59

sousuke

総合スコア3830

user-name1

2020/06/15 12:52

sousuke様ご教示いただきありがとうございました。また、ご指摘もありがとうございます。たしかに言われた通り「間違いの箇所探してください」と捉えられてもおかしくないですね。すみませんでした、今後質問する際はサイトURLとプラスして別途コードも記載するようにします。内容に関してですが、「スクロールできないというよりかコンテンツ自体のheightがない」 →たしかにその通りでした、　トップページのコンテンツは「Welcome to my Portfolio site」のタイトルのみで、　その他に自己紹介や他に作成したポートフォリオを表示するページがあるのですが、　その部分はコンテンツがいくらかはあるので、縦に伸びるような形になるかもしれません。　また、１ページで完結する長いサイトに変えてみようとも考えています。　参考サイトのようにすれば縦にスクロールできるサイトが作成できるかもしれません。　参考URL↓ 　http://portfolio.outomoput.info/#skills 　　今あるページも新しく作成するサイトも　もう一度作成してみて、コンテンツを確認してみようと思います。　ありがとうございました。

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