新しいコードを追加すると項目が画面から消えてしまいます

Question

現在ポートフォリオの作成中ですが、セクションに新しいコードや項目を追加しようとするたびに、現在の項目が一番上に押し出され、ビューポートの外に出てしまいます。私のコードで何がこれを引き起こしているのかわかりません。私は JSX を使用していますが、React アプリケーション全体を決定する app.js と app.css に問題があるように感じます。これは私の現在の CSS です:

リーリー

高さが足りないのではないかと思ったのですが、いくら高くしてもダメでした。位置の問題である可能性もありますが、上部の位置をさらに調整しようとしましたが、多くのことに影響する可能性があるため、この位置に基づいてコードのほとんどを調整しました。助けてください。ありがとう！

Answer 1

1. 位置を調整しようとしたが問題が発生したとのことですが、要素が重なったりはみ出したりしないように、要素の位置を再評価する必要があるかもしれません。既存のアイテムの位置を調整するには top または margin-top の値を使用して、アイテムが押し上げられないようにします。

2. body

   要素は height: 300vh; を使用します。これは、ボディの高さが常にビューポートの高さの 3 倍であることを意味します。コンテンツがこれを超える場合は、問題が発生する可能性があります。height を設定するために相対単位 (パーセンテージなど) を使用するか、固定値を使用するのではなくコンテンツによって高さを決定させることを検討してください。

3. body

   要素に overflow: auto; を設定すると、コンテンツがビューポートに収まらないときにスクロール バーが表示される可能性があります。コンテンツがスクロールする場合は問題ありませんが、新しいコンテンツをスクロールせずに収めたい場合は、レイアウトまたはコンテンツ構造を調整する必要がある場合があります。