div height:100%; not working with display:table-cell;

Question

My code was working when

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>

But not working when i added display:table-cell; to div for using vertical-align

<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>

I want the div to cover the whole white space in body

http://stackoverflow.com/questions/3480060/css-displaytable-row-does-not-expand-when-width-is-set-to-100 — Massimiliano Peluso, Jun 06 '12 at 08:14
please try these codes as explaining this will waste a lot of time of both of us and there is no gaurantee that you will understand correctly what i want to say theoretically — , Jun 06 '12 at 08:32
Why you want to set the DIV display table-cell or row when the DIV is already block level element? — Dipak, Jun 06 '12 at 08:51

Ashwin Krishnamurthy · Accepted Answer · 2017-11-28T19:17:37.270

18

Your code should work now.

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

Example

Rule of thumb : Always have a proper markup whenever display : table-cell is concerned.

edited Nov 28 '17 at 19:17

answered Jun 06 '12 at 08:36

Ashwin Krishnamurthy

3,750
3
27
49

FYI, the 'table-row'
is not necessary
– Reza Assar Apr 29 '14 at 20:38
1

@Ashwin, Why use `display : table;` and `display : table-cell;` when you can simply use `` and `
`?
– Pacerier May 07 '14 at 04:00
2

@Pacerier Because the greater web design community has decided that `table` is for displaying tabular data only. This despite the fact that **table layouts work across all browsers, old and new** and without having to resort to CSS hacks and trickery. Tables are, after all, considered harmful. – Yuck May 15 '14 at 15:03
2

@Yuck, So tables are considered harmful for the *sake* of being considered harmful? That reminds me of the kind of answers I receive at http://stackoverflow.com/q/23453621/632951 – Pacerier May 18 '14 at 16:57
1

@Pacerier I was making reference to the "goto statement considered harmful". See also - http://en.wikipedia.org/wiki/Considered_harmful – Yuck May 18 '14 at 18:42
5

@Yuck Setting `display: table` on a non-`table` is no more a "hack" than setting `display: inline` on a non-`span` is. When the logical structure of a document differs from its presentation needs, it makes sense to use non-default display properties. This has nothing to do with whether "table layouts" are "harmful", because in both cases the layout rendering is based on exactly the same input: table display. – nmclean May 30 '14 at 12:18
@Pacerier Real-world benefits of `
`s with `display:table` and `display:table-cell` for layout are a) they work better with responsive layouts, toggling between table-style layout on wider screens and display: block` on narrow screens, and b) are more predictable for non-visual clients like screen readers and crawlers which might otherwise read the page as if rows and columns were related
– user56reinstatemonica8 Nov 28 '17 at 18:41

score 1 · Answer 2 · answered Jun 06 '12 at 08:12

1

You have to set the height to 100% for all parent elements then...

html, body {
    height: 100%
}

Give it a try, it worked for me. And better remove all the CSS properties you set to the body-element before.

answered Jun 06 '12 at 08:12

Jan Petzold

1,561
1
15
24

1

it is simply not working.BTW remove this answer and get your lost reputation back – Jun 06 '12 at 08:30
@somebodyisintrouble The solution works well. He just had to explain it properly. Check my answer – Dipak Jun 06 '12 at 08:44

score 1 · Answer 3 · answered Dec 18 '16 at 07:39

Having div.table > div.table-row > table.table-cell with height of its container is a bit tricky thing. One of the easiest way is that you can add

.table {
    position: absolute;
}

in this case if you will add

.table {
    height: 100%;
}

That will fit its parent height.

div height:100%; not working with display:table-cell;

3 Answers3

Linked