このようなものを再作成しようとしていますが、いくつかの問題が発生しています。最初の問題は、「メイン」 div を中央に配置することでした。私はこれを行いました:
リーリーしかし、「位置: 固定」のため、背景が表示されなくなり、本文に背景を追加しました。
私が遭遇したもう 1 つの問題は、再作成したい Web サイト上に 2 つの p 要素が隣り合っていましたが、次のコードを使用して 2 つの p 要素をまとめることができなかったことです。
リーリーこれは、私の p 要素と HTML 全体は次のようになります:
ああああ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
メイン コンテンツを絶対的に配置する代わりに、body 要素に display: flex を適用し、それを 100vh に設定して、ビューポートをカバーすることができます。その後、背景が再び表示されます。
p 要素についても、同様に、display: flex を使用して div でラップし、以下の例のように並べて配置します。
あなたの考え方は理解できますが、残念ながら、それは完全に正しいわけではありません。ご覧のとおり、最初のページのデザインは最初からまったく異なります:
作成者はメイン div を中央に配置せず、
64pxの本体にパディングを追加し、ラッパー div の幅を100%に、高さを に設定しました。100% - 64px * 2。したがって、これを行うには: