Div filling a table cell with 100% height

Question

I'm using Bootstrap and I'm trying to get three columns filled with text overlapping a rectangle, the squares should have the same height and there must be a gutter between them.

By using the display:table; and display:table-cell; properties I have been able to make the col- divs to get the same height but I need the inner div to completely fill the parent and I can't see how to do this.

This is the code:

<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>

and 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;
  }

The question is: how can I get the .dins div to cover all the parent table cell?

Please see the sample I've made here: https://www.bootply.com/dId7aMpOcX

I realize now that not even the suggested solution works well on mobile screens — naio, Aug 10 '17 at 11:29

score 1 · Answer 1 · answered Aug 10 '17 at 11:12

1

use this code

  .dins {
    height:100%;
    }

or you can use style in div instead of class

 <div style="height:100%">

answered Aug 10 '17 at 11:12

Deshal Kh

253
1
12

score 1 · Answer 2 · answered Aug 10 '17 at 11:34

use this code

<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>

With this solution the width of the columns change according to the text length, please check the sample: https://www.bootply.com/C6MkbvQcYc — naio, Aug 10 '17 at 11:41

Frons · Answer 3 · 2017-08-10T11:20:11.217

0

You could add a min-height to your din classed

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

or you could try one of these solutions How can I make Bootstrap columns all the same height?

edited Aug 10 '17 at 11:20

answered Aug 10 '17 at 11:07

Frons

3
4

I don't want to set a fixed height to that `div`because it will be defined by the inner text – naio Aug 10 '17 at 11:11
it doesn't work well, I already used solution 2 of the proposed but it doesn't work well on mobile displays and the `dins` div doesn't fully cover the parent's div height – naio Aug 10 '17 at 11:27

score 0 · Answer 4 · answered Aug 10 '17 at 11:11

Instead of col-md-4 you can normally put the division. Here is the code

<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%;
}

This solution doesn't take advantage of Bootstrap grid responsiveness — naio, Aug 10 '17 at 11:18
Yes but you have to make your changes for mobile using media query. — Anmol Sandal, Aug 10 '17 at 11:40

score 0 · Answer 5 · answered Aug 10 '17 at 11:40

Try using flex property :

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;
}

This solution doesn't respect Bootstrap responsive behaviour, moreover: the column widths differ (see your Plunker) — naio, Aug 10 '17 at 11:43

score 0 · Answer 6 · answered Aug 10 '17 at 12:01

Please check this code structure 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; }

I see your code and the first column is taller and narrower! — naio, Aug 10 '17 at 12:10

naio · Answer 7 · 2017-08-10T13:43:22.743

0

Solution 1 here solved the issue not completely though: I had to avoid rounded corners as they weren't shown on the div's bottom.

Solution 2 (as applied in my question) seemed leaner but it didn't fully work.

Here is the solution code now working correctly: https://www.bootply.com/dId7aMpOcX

edited Aug 10 '17 at 13:43

answered Aug 10 '17 at 13:19

naio

307
2
4
11

Div filling a table cell with 100% height

7 Answers7