cedlemo cedlemo - 2 months ago 18
CSS Question

Css display table doesn't respect size expressed in percentage

I have a simple table :

<body>
<div class="wrapper">
<div class="board">
<div class="line">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
<div class="line">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
<div class="line">
<div class="position"></div>
<div class="position"></div>
<div class="position"></div>
</div>
</div>
</div>
</div>
</body>


And with this Css:

.wrapper {
width: 80%;
height: 80%;
margin: auto;
}
.board {
background-color: #37392e;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}

.line {
display: table-row;
}
.position {
background-color: #DDCECD;
display: table-cell;
width: 33%;
}


When I specify the size both with and height, the div doesn't show up. I won't use text in the div but display images in theirs css "background" property. How can I do to force the table elements to respect the size expressed in %.

Answer

It's because body height equals zero and 80% of 0 is still 0. You need set a specific height for the wrapper, you can use HTML5 vh unit to set it to 80% of view port.

.wrapper {
    width: 80%;
    height: 80vh;
    margin: auto;
}