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

时间：2016-10-10 21:23:26

标签： html css

你好，所以我有一个div只有两张图片，并没有那么多的文字，但尽管如此，文字溢出了它的容器，这是一个问题。我的目标是有两个单独的容器，列表位于底部。我能做到这一点顺利吗？我只需要摆脱溢出，并能够将列表保存在一个单独的容器中。列表可以在同一个容器中，但我不太确定该结构甚至是什么样子，因为它必须是一个带有一个顶行的div（顶行会有左+右部分）和一个底部行（垂直列表）。另外这个问题只有在手机上才能找到，据我所知，在片段中你会发现它比这里看起来更糟糕。但我不太清楚该怎么做;容器已经是100％宽度和100％高度。最后，列表必须仍然出现在第一个容器之后。

＆＃13;
＆＃13; 
* {
  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%;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
* {
  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%;
  }
}
＆＃13; 
<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-->
＆＃13;
＆＃13;
＆＃13;

取消注释＆＃34; .container＆＃34;媒体查询之外。第一次媒体查询内部＆＃34; .container＆＃34;将高度设置为auto，以便已设置此覆盖高度。

相关问题
最新问题