CODEWITHSUNDEEP
htmlcss
cedlemo
cedlemo

Reputation: 3334

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

Upvotes: 0

Views: 469

Answers (3)

Sergio Tx
Sergio Tx

Reputation: 3868

If you want to use height in percentage (%) then, parents height needs to be set. Just add 100% height to body and html tags.

html, body{
 height: 100%; 
}
.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%;
}
<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>
</body>

Upvotes: 1

MakG
MakG

Reputation: 1274

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

Upvotes: 1

Sidharth Gusain
Sidharth Gusain

Reputation: 1501

Set body, html height to 100% then you will be able to use height of your board div in %

Your working code with height in % :

html,
body {
  height: 100%;
  min-height: 100%;
}
.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%;
}
<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>

Upvotes: 1

Related Questions