質問: HTML/CSS初心者です(udemyで講座視聴レベル).こちらのサイトのコードをもとに,Webページ作成の勉強をしていたのですが,mainページ(ヘッダーバーの直下)の内容が多くなると,直下のworksのスペースに文字が入ってしまいました. 他項目(works, skill, about, contact)いついては内容を増やしても,スペースが自動的に大きくなることで対応できたのですが,mainではできません. 自分の理解としては との領域が一致していないことが問題かと考えております. 初歩的な質問で恐縮ですが,何卒よろしくお願いいたします. ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d6d8734849cc8ead9bcaa524c50feafb.png)
回答: 修正依頼でも指摘されているように、コードは画像ではなくマークダウンのコードブロックで提示してください。(質問は編集できます。) いちおう、画像で見える範囲で判断して回答しておきます。 `.main-visual`に`height: 85vh;`で高さを固定してますので、中身がこの高さを超える時、はみ出ます。 中身が増えたらそれに合わせて`.main-visual`の高さも拡張したいのなら、`height: 85vh;`を`height: auto;`にすればいいでしょう。 あるいは、最小の高さは `85vh` を確保したいということなら、`height: 85vh;`を`min-height: 85vh;` にすればいいでしょう。