height: 100% for
inside
with display: table-cell

Question

Here is 2 column markup using display: table and display: table-cell CSS declarations:

.table {
  display: table;
}

.cell {
  border: 2px solid black;
  vertical-align: top;
  display: table-cell;
}

.container {
  height: 100%;
  border: 2px solid green;
}

<div class="table">
  <div class="cell">
    <p>Text
      <p>Text
        <p>Text
          <p>Text
            <p>Text
              <p>Text
                <p>Text
                  <p>Text
  </div>
  <div class="cell">
    <div class="container">Text</div>
  </div>
</div>

But .container block does not fill parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2.

What I have | What I need

What I have What I need

Please, do not propose JS solution.

The issue is that you are using `height: 100%;` for child element whose parent `height` is set to `auto`, so inorder to fix this, assign `height: 100%;` to all the parents, and if not, than use some fixed `height` for `.cell` — Mr. Alien, Mar 06 '14 at 09:55

score 56 · Accepted Answer · edited Aug 15 '19 at 18:16

56

When you use % for setting heights or widths, always set the widths/heights of parent elements as well:

.table {
    display: table;
    height: 100%;
}

.cell {
    border: 2px solid black;
    vertical-align: top;
    display: table-cell;
    height: 100%;
}

.container {
    height: 100%;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

<div class="table">
    <div class="cell">
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
        <p>Text
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

edited Aug 15 '19 at 18:16

Martin Tournoij

24,971
24
101
136

answered Mar 06 '14 at 09:53

anurupr

2,258
2
19
28

3

You should add `-moz-box-sizing: border-box;` to the `.container` to make it also work correctly on FF. – Itay Mar 06 '14 at 10:03
Yes you are right. the `.container` div was having a height greater than 100%. Fixed it and updated the jsfiddle in my answer – anurupr Mar 06 '14 at 10:06
9

Change the table height to 1px and it works for IE11. Nothing below that though. – James South Mar 12 '15 at 09:07
4

Why doesn't this work in – JCraine Mar 22 '15 at 15:46
@JamesSouth any suggestions for IE9, 10? – user1561346 Nov 12 '15 at 14:42
@user1561346 Not of the top of my head I'm afraid. – James South Nov 17 '15 at 05:14
Just wait a few more weeks and you won't have to worry about IE10 and below anymore :-) https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support – Capsule Nov 25 '15 at 23:47
2

@Capsule Microsoft dropping support is so not equal to people stop using it. – Growiel Mar 08 '16 at 05:45
@Growiel no but at least you can justify why they get a degraded version of your website – Capsule Mar 08 '16 at 06:14
2

To add to what James South pointed out, adding `height: 100%; min-height: 1px;` to the `display: table` class will help IE 11. – Trevor Nestman Dec 05 '16 at 17:31
interesting. it works in FF 57. need to do some more digging – anurupr Dec 08 '17 at 13:03
4

This solution stopped working on Chrome unfortunately – Valera Tumash Jan 10 '18 at 02:20
These short answers has a tremendous power, sometime. Indeed, it works, at least on Firefox. Tks :) – ivanleoncz Sep 20 '18 at 19:32

score 47 · Answer 2 · edited Jan 10 '18 at 03:30

47

table{
   height:1px;
}

table > td{
   height:100%;
}

table > td > .inner{
   height:100%;
}

Confirmed working on:

Chrome 60.0.3112.113, 63.0.3239.84
Firefox 55.0.3, 57.0.1
Internet Explorer 11

edited Jan 10 '18 at 03:30

Valera Tumash

606
7
15

answered Sep 08 '17 at 06:37

Danila Alpatov

704
5
11

28

table { height:1px; } is the key – ceferrari Nov 06 '17 at 01:03
2

This one actually worked well with the new version of Chrome, after the accepted solution stopped working for it. – Valera Tumash Jan 10 '18 at 02:28
2

ridiculous, but perfect. Thanks! I actually didn't even need the `td { 100% }`, just the `table` and `.inner` styles worked for me. – Scrimothy Jan 23 '19 at 18:37
But why? Is this a bug or intended behavior? Works like a charm on firefox 68.5 and chrome 79. @Scrimothy `td { 100% }` is still needed by firefox. – Kamil Bęben Feb 26 '20 at 18:43
@KamilBęben I'd not noticed that on FF. Thanks – Scrimothy Feb 26 '20 at 20:10

score 25 · Answer 3 · answered Aug 01 '14 at 09:48

25

set height: 100%; and overflow:auto; for div inside .cell

answered Aug 01 '14 at 09:48

hd.deman

1,055
11
16

`overflow:auto;` was the key for me. Thanks! – Kyle Falconer Jul 25 '16 at 18:55
2

But what about the scroll bar which appears with `overflow: auto` ? – Kévin Vilela Pinto Sep 08 '18 at 09:51

score 18 · Answer 4 · edited Nov 05 '18 at 16:06

18

In Addition to jsFiddle, I can offer an ugly hack if you wish in order to make it cross-browser (IE11, Chrome, Firefox).

Instead of height:100%;, put height:1em; on the .cell.

edited Nov 05 '18 at 16:06

Nathan Arthur

6,757
5
49
71

answered Aug 20 '15 at 08:01

Saar

2,236
1
15
14

Can you explain why changing height: 100% to height: 1em; works? 1em should just be the height of the letter "m" .... Funny, I have a similar issue as above and changing to height:1em fixed my issue across the board. Kudos! NOTE* I did not do anything else like changing position etc... – Wes Duff Jan 11 '16 at 20:44
1

I'm not sure if its ugly, but it works. Wish I knew why. – Casey Plummer Feb 17 '17 at 04:37

score 10 · Answer 5 · answered Jan 03 '16 at 22:20

10

Make the the table-cell position relative, then make the inner div position absolute, with top/right/bottom/left all set to 0px.

.table-cell {
  display: table-cell;
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

answered Jan 03 '16 at 22:20

Abdalla Mahmoud

101
1
4

What if your `.inner-div` have margins or it can have overflowing content? – Naman Oct 01 '17 at 18:48

Ernest Sawyer · Answer 6 · 2015-07-07T11:17:56.487

7

This is exactly what you want:

HTML

<div class="table">

    <div class="cell">
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
        <p>Text</p>
    </div>
    <div class="cell">
        <div class="container">Text</div>
    </div>
</div>

CSS

.table {
    display: table;
    height:auto;
}

.cell {
    border: 2px solid black; 
    display:table-cell;
    vertical-align:top;
}

.container {
    height: 100%;
    overflow:auto;
    border: 2px solid green;
    -moz-box-sizing: border-box;
}

edited Jul 07 '15 at 11:17

answered Mar 06 '14 at 10:05

Ernest Sawyer

260
2
13

`-moz-box-sizing: border-box;` for `.container` is here for it :) – Ernest Sawyer Mar 06 '14 at 10:11
3

Works in FF, but not in IE (11) – fregante Nov 07 '14 at 16:46

score 3 · Answer 7 · answered Mar 06 '14 at 09:52

3

Define your .table and .cell height:100%;

    .table {
        display: table;
        height:100%;
    }

    .cell {
        border: 1px solid black;
        display: table-cell;
        vertical-align:top;
height: 100%;

    }

    .container {
        height: 100%;
        border: 10px solid green;

    }

Demo

answered Mar 06 '14 at 09:52

Rohit Azad Malik

30,330
17
61
93

None of those solutions worked on Bootstrap elements: table element is a raw, cell element is a col-lg and the container is a panel – Yazid Erman Nov 18 '15 at 05:10

height: 100% for
inside
with display: table-cell

7 Answers7

Linked

Related

height: 100% for inside with display: table-cell

7 Answers7

Linked

Related

height: 100% for
inside
with display: table-cell