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

Question

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

P粉475126941 · Answer

位置を調整しようとしたが問題が発生したとのことですが、要素が重なったりはみ出したりしないように、要素の位置を再評価する必要があるかもしれません。既存のアイテムの位置を調整するには top または margin-top の値を使用して、アイテムが押し上げられないようにします。
body
要素は height: 300vh; を使用します。これは、ボディの高さが常にビューポートの高さの 3 倍であることを意味します。コンテンツがこれを超える場合は、問題が発生する可能性があります。height を設定するために相対単位 (パーセンテージなど) を使用するか、固定値を使用するのではなくコンテンツによって高さを決定させることを検討してください。
body
要素に overflow: auto; を設定すると、コンテンツがビューポートに収まらないときにスクロールバーが表示される可能性があります。コンテンツがスクロールする場合は問題ありませんが、新しいコンテンツをスクロールせずに収めたい場合は、レイアウトまたはコンテンツ構造を調整する必要がある場合があります。