Question

我正在使用Bootstrap，我试图让三列填充文本与矩形重叠，正方形应该具有相同的高度，并且它们之间必须有一个排水沟。

通过使用display:table;和display:table-cell;属性，我已经能够使col- div达到相同的高度，但我需要内部div来完全填充父级，我可以看不出怎么做。

这是代码：

<div class="container">
  <div class="fons"></div>
    <div class="linia">
      <div class="col-md-4">
        <div class="dins">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="dins">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

      <div class="col-md-4">
        <div class="dins">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

    </div>

</div>

和CSS：

.fons {
  background-color: blue;
  height: 100px;
  }

.linia {
    display: table;
    margin-top:-50px;
  }

.col-md-4 {
    display: table-cell;
    float:none;
  }

.dins {
    background-color: cyan;
    padding: 15px;
  }

问题是：如何让.dins div覆盖所有父表格单元？

请参阅我在此处制作的示例：https://www.bootply.com/dId7aMpOcX

Answer 1

使用此代码

  .dins {
    height:100%;
    }

或者你可以在div中使用style而不是class

 <div style="height:100%">

Answer 2

使用此代码

<div class="container">
      <div class="fons">
        <table width="100%">
          <tr><td>
            <div class="linia">
     <div class="col-md-4">
            <div class="dins">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
              </div></div></td>
            <td>
            <div class="linia">
     <div class="col-md-4">
            <div class="dins">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
              </div></div></td>
            <td>
       <td>
            <div class="linia">
     <div class="col-md-4">
            <div class="dins">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
              </div></div></td>

          </tr>
        </table>][1]][1]

</div>

Answer 3

你可以为你的din分类增加一个最小高度

   .dins {
    background-color: cyan;
    padding: 15px;
    min-height:150px;
  }

或者您可以尝试其中一种解决方案 How can I make Bootstrap columns all the same height?

Answer 4

而不是col-md-4你通常可以把分区。这是代码

<div class="linia">
  <div class="dins">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="dins">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="dins">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

CSS

.linia {
 display: table;
 margin: 0px -15px;
 border-spacing: 15px;
}
.dins {
 background-color: cyan;
 padding: 15px;
 display: table-cell;
 height: 100%;
 width: 33.33334%;
}

Answer 5

尝试使用flex属性：

Plunker Link：https://plnkr.co/edit/VJFOdwLjgBk9rpGP5KYQ?p=preview

<div class="container">
  <div class="fons"></div>
  <div class="linia">

      <div class="dins">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>


      <div class="dins">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>


      <div class="dins">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>


  </div>
</div>

CSS：

.fons {
  background-color: blue;
  height: 100px;
  }

.linia {
    display: flex;
    margin-top:-50px;
    box-sizing : border-box;
  }

.dins {
    background : cyan;
    margin: 15px;
    padding : 15px;
}

Answer 6

请检查此代码结构https://jsfiddle.net/c0mcwbph/

<div class="container">
<div class="fons"></div>
<div class="linia-wrapper">
<div class="linia">
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-md-4">
<div class="dins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>

CSS

.fons { background-color: blue; }
.linia-wrapper { display: table; width: 100%; }
.linia { display: table-row; }
.col-md-4 { display: table-cell; float: none; }
.dins { background-color: cyan; padding: 15px; }

Answer 7

解决方案1 here不完全解决了这个问题：我不得不避免圆角，因为它们没有显示在div的底部。

解决方案2（在我的问题中应用）似乎更精简，但它没有完全发挥作用。

以下解决方案代码现在正常运行：https://www.bootply.com/dId7aMpOcX

Div填充100％高度的表格单元格

7 个答案: