超出100％高度和100％宽度div的文本溢出

Question

您好，所以我有一个仅包含两张图片的div，并且不喜欢那么多文本，但是尽管如此，文本还是从容器中溢出了，这是一个问题。 我的目标是要有两个单独的容器，列表位于底部。 有没有可以顺利完成此目标的方法？ 我只需要摆脱溢出并能够将列表保存在单独的容器中。 列表可以在同一个容器中，但我不太确定该结构的外观，因为它必须是一个div，其中有一个顶行（顶行有左+右部分）和底行（这将是垂直列表）。 据我所知，这也是一个仅在移动设备上发现的问题，在摘要中，您看到的问题甚至比这里看起来的还要糟糕。 但是我不太确定该怎么做。 容器的宽度已经是100％，高度已经是100％。 最后，该列表仍必须出现在第一个容器之后。

 * { margin: 0; } body { background-color: green; } html, body { height: 100%; } .left { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; order: 1; width: 45%; } .middle { display: flex; flex-flow: column wrap; order: 2; width: 45%; height: 100%; } .list ul { list-style: none; padding: 0; } .list a { text-decoration: none; color: inherit; } #bigwrap { height: 100%; } .container { display: flex; position: relative; flex-flow: row wrap; justify-content: space-around; align-items: stretch; height: 100vh; width: 80%; margin: 5% auto 8% auto; background-color: white; } .middle p:first-child { margin-top: 8%; } .list ul { list-style: none; padding: 0; } .list a { text-decoration: none; color: inherit; } li { list-style-type: none; font-size: 18px; } .lihead { font-size: 24px; margin-bottom: 1%; } .stuff { background-color: white; margin: auto; width: 70%; } .stuff ul li { margin-bottom: 2%; } .center { text-align: center; } .center1 { text-align: center; color: green; font-size: 28px; } .tpoint { font-size: 24px; color: orange; } .mtop { margin-top: 2%; } a { text-decoration: none; color: orange; } .foot { display: flex; flex-flow: row wrap; justify-content: center; } .foot div { margin-right: 1%; } .container .box { border: 2px solid red; } @media all and (max-width: 900px) { #nav { flex-direction: column; /*updated*/ margin-bottom: 7%; } #nav ul { padding-left: 0; /*added*/ } #nav li { flex: 1 1 100%; /*updated*/ padding: 5px; border-top: 1px solid black; border-bottom: 1px solid black; } #nav li a { text-align: center; padding: 5px; margin: 5px; } #bigwrap { width: 100%; } .container { flex-flow: row wrap; min-height: 100vh; width: 100%; } .left, .right { flex: 1 100%; } .middle { flex-flow: row wrap; flex-grow: 1; flex-shrink: 1; justify-content: center; } .box { width: 70%; text-align: center; } #header2 { justify-content: space-around; } } @media (min-width: 900px) and (max-width: 1100px) { #nav { justify-content: space-around; } .container { width: 100%; } } 

 <div id="bigwrap"> <div class="container"> <div class="left"> <img src="eggs.jpg" width="209" height="205" alt="Picture of kid" /> <img src="benedict.jpg" width="209" height="205" alt="Picture of kid"> </div> <div class="middle"> <div class="box"> <h2> Sample list </h2> </div> <div class="box"> <p> Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. </p> </div> <div class="box"> <p> Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. </p> </div> </div> </div> <div class="stuff"> <p class="center1">Sample sample</p> <p class="center tpoint">Sample Food</p> <ul> <li>Sample Mr.Sample <ul> <li>Samples</li> <li>Sammple</li> </ul> </li> <li>Sample <ul> <li>Sample</li> <li>Sample</li> </ul> </li> <li>Eggs <ul> <li>Sampl;e</li> <li>Sample</li> </ul> </li> <li>Sam <ul> <li>Sample</li> <li>List</li> </ul> </li> <li>Lists <ul> <li>Lists</li> <li>Lists</li> </ul> </li> </ul> <p class="center tpoint">List</p> <ul> <li>List <ul> <li>List</li> </ul> </li> <li>Sample</li> <li>List</li> <li>Ss</li> <li>Samples</li> <li>List</li> <li>This is a sample</li> <li>This is a sample</li> </ul> <p class="center tpoint">Sam</p> <ul> <li>Sample <ul> <li>Samples</li> </ul> </li> <li>More samples <ul> <li>This is a sample</li> </ul> </li> </ul> </div> 

Answer 1

 * { margin: 0; } body { background-color: green; } html, body { height: 100%; } .left { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; order: 1; width: 45%; } .middle { display: flex; flex-flow: column wrap; order: 2; width: 45%; height: 100%; } .list ul { list-style: none; padding: 0; } .list a { text-decoration: none; color: inherit; } #bigwrap { height: 100%; } .container { display: flex; position: relative; flex-flow: row wrap; justify-content: space-around; align-items: stretch; height: 100vh; width: 80%; margin: 5% auto 8% auto; background-color: white; } .middle p:first-child { margin-top: 8%; } .list ul { list-style: none; padding: 0; } .list a { text-decoration: none; color: inherit; } li { list-style-type: none; font-size: 18px; } .lihead { font-size: 24px; margin-bottom: 1%; } .stuff { background-color: white; margin: auto; width: 70%; } .stuff ul li { margin-bottom: 2%; } .center { text-align: center; } .center1 { text-align: center; color: green; font-size: 28px; } .tpoint { font-size: 24px; color: orange; } .mtop { margin-top: 2%; } a { text-decoration: none; color: orange; } .foot { display: flex; flex-flow: row wrap; justify-content: center; } .foot div { margin-right: 1%; } .container .box { border: 2px solid red; } @media all and (max-width: 900px) { #bigwrap { width: 100%; } .container { flex-flow: row wrap; min-height: 100vh; width: 100%; height: auto; } .left, .right { flex: 1 100%; } .middle { flex-flow: row wrap; flex-grow: 1; flex-shrink: 1; justify-content: center; } .box { width: 70%; text-align: center; } #header2 { justify-content: space-around; } } @media (min-width: 900px) and (max-width: 1100px) { #nav { justify-content: space-around; } .container { width: 100%; } } 

 <div id="bigwrap"> <div class="container"> <div class="left"> <img src="eggs.jpg" width="209" height="205" alt="Picture of kid" /> <img src="benedict.jpg" width="209" height="205" alt="Picture of kid"> </div> <div class="middle"> <div class="box"> <h2> Sample list </h2> </div> <div class="box"> <p> Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. </p> </div> <div class="box"> <p> Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence.Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. Sample sentence. </p> </div> </div> </div> <!--end of container--> <div class="stuff"> <p class="center1">Sample sample</p> <p class="center tpoint">Sample Food</p> <ul> <li>Sample Mr.Sample <ul> <li>Samples</li> <li>Sammple</li> </ul> </li> <li>Sample <ul> <li>Sample</li> <li>Sample</li> </ul> </li> <li>Eggs <ul> <li>Sampl;e</li> <li>Sample</li> </ul> </li> <li>Sam <ul> <li>Sample</li> <li>List</li> </ul> </li> <li>Lists <ul> <li>Lists</li> <li>Lists</li> </ul> </li> </ul> <p class="center tpoint">List</p> <ul> <li>List <ul> <li>List</li> </ul> </li> <li>Sample</li> <li>List</li> <li>Ss</li> <li>Samples</li> <li>List</li> <li>This is a sample</li> <li>This is a sample</li> </ul> <p class="center tpoint">Sam</p> <ul> <li>Sample <ul> <li>Samples</li> </ul> </li> <li>More samples <ul> <li>This is a sample</li> </ul> </li> </ul> </div> <!--end of stuff--> </div> <!--end of bigwrap--> 

在媒体查询之外，取消注释“ .container”上设置的高度。 在“ .container”上的第一个媒体查询中，将高度设置为自动，以便此高度已设置。