セクションタグ内にdivタグを含める方法

Question

thisのような完全セクションページのウェブサイトを作成しています。各ページは独自の<section>タグです。現在、私のページには4つのセクションがあります（異なる背景色で表示されます）。

私の最初のセクションには、コンテナdivと2つの新しいdiv（イメージ用と説明用の2つ）があります。ここで、ウィンドウが最小化されると、説明の内容が最初のページに含まれるのではなく、2ページ目になります。例：

私は何を変更する必要があるか教えてください。 ..私は長い間、この問題に取り組んできたと私は私のコードのために働くのリソースや解決策を見つけるためには至っていない

私のHTMLコード：

<!-- FIRST PAGE --> 
<section> 
    <div class="content" id="about"> 
    <!-- Picture --> 
    <div id="aboutImage"> 
     <img src="img/about.jpeg"> 
    </div> 

    <!-- Description --> 
    <div id = "aboutInfo"> 

     <h2>Lorem Ipsum.</h2> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> 
     Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. 
     Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. 
     Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris. 
     In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor 
     maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien 
     a ex porta dictum. 
     </p> 
    </div> 
    </div> 
</section> 

<!-- SECOND PAGE--> 
<section id="skills"></section> 

マイCSS：

* {margin:0;padding:0;box-sizing:border-box} 
html, body {width: 100%;} 

* {box-sizing: border-box;} 

html, body { 
    height:100%; 
    position: relative; 
} 

section{ 
    width: 100%; 
    height:100vh; 
} 

.content{ 
    display: table-cell; 
    height: 100vh; 
} 

/* ABOUT */ 
#about { 
    border-bottom: #F1C40F 5px solid; 

    display: flex; 
    justify-content: space-evenly; 
    align-items: center; 
} 

#aboutImage { 
    padding: 30px 30px 30px 30px; 
} 

#aboutInfo { 
    border-style: dashed; 
    border-width: 2px; 
    border-color: black; 

    font-size: 30px; 
    text-align: left; 
} 

#aboutInfo p { 
    font-size: 15px; 
} 

/* SECOND PAGE*/ 
#skills { 
    background-color: #E3E7D3; 
} 

/* RESPONSIVE DESIGN */ 
@media screen and (max-width: 768px){ 
    #about { 
    flex-direction: column; /* added */ 
    } 
} 

この問題を解決する方法を教えてください。私はとても大変なことをしてきました。

Answer 1

は#aboutInfodivのCSSに

overflow: scroll; 

を追加します。これは、コンテンツがオーバーフローするたびに、次のページに行くのではなく、そのdivがコンテンツをスクロールするということです。それがここにcodepen

テストはまた、私はまた、あなたは、このdiv要素はもうオーバーフロー次のページにないことを確認できるだけので#aboutInfodivのCSSにmargin-bottom: 20px;を追加しました。