如何在html中的section标签内包含div标签

我正在制作一个完整版块的页面网站，如this。每个页面都有自己的<section>标签。目前我的网页有4个部分（呈现不同的背景颜色）。如何在html中的section标签内包含div标签

我的第一部分有一个容器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 */ 
    } 
}

请让我知道如何解决这个问题。我一直有这么多麻烦。

来源

2017-10-13 dollaza

玩弄“溢出” - 你可能会显示它，当你想剪辑它，或使用滚动条。 – theGleep

添加

overflow: scroll;

到#aboutInfodivCSS。这将做的是，只要内容溢出，而不是转到下一页，该div将滚动内容。

测试在这里codepen

此外，我还添加了margin-bottom: 20px;到#aboutInfodivCSS只是让你可以看到，这个div不溢出到下一个页面了。

来源

2017-10-13 21:04:23 Yousaf

谢谢！哇这么简单的修复！我想知道有没有其他方法可以做到这一点？我见过其他网站，而不是添加一个滚动条，而是将其展开以适应内容的页面。 – dollaza

如何在html中的section标签内包含div标签

回答

相关问题