Question

我有一个非常复杂的div布局。

它适用于Safari和Firefox，没有任何问题：

但是在chrome上打开页面会给我以下结果：

所以整个屏幕分为两个垂直放置的大div。顶部有一个橙色圆点，另一个底部有彩色div。

当我向粉色div添加太多文本时，布局开始扩展。有趣的是，div获得的文本比它可以显示的更多，而且它真的有效，因为

overflow: hidden;

但是从相当多的行开始，div因某种原因开始扩展

我试图在fiddle中重现这个问题。但我无法做到。

我还能尝试找到什么问题？或者有人看到我做错了吗？

我给出的代码是底部的一半是问题可能是。

HTML：

<div class="ThirdSectionTextArea">

      <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
      </div>
      <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
          <div class="Row Row1 uppercase">
              <div class="cell cell1">
                    SOME HEADERTEXT
              </div>
               <div class="cell cell2">
                       SOME HEADERTEXT
              </div>
              <div class="cell cell3">
                       SOME HEADERTEXT
              </div>
          </div>
          <div class="Row Row2">
              <div class="cell cell1">
                   <table class="layoutTable"><tr><td class="centerDiv">
                       <div class="h_line">
                       </div>
                   </td></tr></table>
              </div>
               <div class="cell cell2">
                    <table class="layoutTable"><tr><td class="centerDiv">
                       <div class="h_line">
                       </div>
                   </td></tr></table>
              </div>
               <div class="cell cell3">
                    <table class="layoutTable"><tr><td class="centerDiv">
                       <div class="h_line">
                       </div>
                   </td></tr></table>
              </div>
          </div>
          <div class="Row Row3">
              <div class="cell cell1">
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
              </div>
               <div class="cell cell2">
                   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

              </div>
               <div class="cell cell3">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
              </div>
          </div>
      </div>
      <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
      </div>

  </div>

  <div class="ThirdSectionBottomLayout">
       <table class="layoutTable"><tr><td class="centerDiv">
                <img src="../img/basics/Pfeil.png" alt="Pfeil" class="ThirdSectionBottomArrow">
            </td></tr></table>
  </div>

CSS：

.ThirdSectionTextArea {
    width:250px;;
    height:180px;
    background-color: aqua;
}

.ThirdSectionBottomLayout {
    width:100%;
    height:15%;
    background-color: chartreuse;
    position:relative;
}

.ThirdSectionBottomArrow {
    top:-0%;
    height:100%;
    width:5%;
    object-fit:scale-down;
    position: absolute;
}

.ThirdSectionTextAreaCell {
    float:left;
    overflow: hidden;
    text-align: left !important;
    height:100%;
}

.ThirdSectionTextAreaCell1{
    background-color: aqua;
    width: 20%;
}

.ThirdSectionTextAreaCell2{
    background-color: fuchsia;
    width: 60%; 
}

.ThirdSectionTextAreaCell3{
    background-color: darkorchid;
    width: 20%;  
}
.ThirdSectionTextAreaCell2 .Row {
    width:100%;
}

.ThirdSectionTextAreaCell2 .Row1 {
   background-color: burlywood;
   height:20%;
}

.ThirdSectionTextAreaCell2 .Row1 .cell{
   width:33.33%;
   height:100%;
   float:left;
   overflow: scroll;
   background-color: burlywood;
}

.ThirdSectionTextAreaCell2 .Row2 {
    background-color: deepskyblue;
    height: 3%;
}

.ThirdSectionTextAreaCell2 .Row2 .cell{
   width:33.33%;
   height:100%;
   float:left;
   overflow: scroll;
}

.ThirdSectionTextAreaCell2 .Row3 {
    background-color: deeppink;
    height:77%;
}

.ThirdSectionTextAreaCell2 .Row3 .cell{
   width:33.33%;
   height:100%;
   float:left;
   overflow: hidden;
}

溢出的文字太多：隐藏

0 个答案: