如何在html

Question

我正在创建一个完整的网页页面，例如this。每个页面都有自己的<section>标记。目前我的页面有4个部分（以不同的背景颜色显示）。

我的第一部分有一个容器div，里面有两个新的div（一个用于图像，另一个用于描述）。现在，当窗口最小化时，描述的内容溢出并转到第二页而不是包含在第一页中。举例说明：

请让我知道要做出哪些更改。我已经在这个问题上工作了很长时间，我还没有找到适用于我的代码的资源或解决方案..

我的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

添加

overflow: scroll;

到CSS #aboutInfo的{​​{1}}。这样做的是，只要内容溢出，而不是转到下一页，该div就会滚动内容。

在此处测试codepen

此外，我还将div添加到margin-bottom: 20px; CSS的{​​{1}}，以便您可以看到此div不再溢出到下一页。