html - 如何在html中的部分标签内包含一个div标签

Question

我正在制作一个像this 这样的完整版 block 页面的网站。 .每一页都是自己的 <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;

到 #aboutInfo div 的 CSS。这样做的目的是，每当内容溢出时，该 div 将滚动内容，而不是转到下一页。

在这里测试 codepen

此外，我还在 #aboutInfo div 的 CSS 中添加了 margin-bottom: 20px; 就这样你可以看到这个 div 不再溢出到下一页了。