CODEWITHSUNDEEP
htmlcss
Ryan Schaefer
Ryan Schaefer

Reputation: 3120

CSS incorrect height of element

I'm trying to set rows within a table to be 20% of page height.

Currently index.html looks something like this:

div#machines {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding-left: 10%;
  padding-right: 10%;
  width: 80%;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

td {
  width: 20%;
  height: 100%;
}

tr {
  width: 100%;
  height: 20%;
}

table {
  width: 100%;
  height: 100%;
}
<body>
  <div id="machines">
    <table>
      <tr>
        <td id="stone">0</td>
        <td id="copper">0</td>
        <td id="iron">0</td>
        <td id="coal">0</td>
      </tr>
      <!-- ... (trs continue but truncated for length of code) -->
    </table>
  </div>
</body>

So therefore (at least to my understanding) a table is taking up 100% of the machines div then I create a row in that table that is 100% of the width and 20% of the height (but incorrectly the row becomes 100% of the height of the table.) The td should then be 20% of the width of the row and 100% the height of the row.

How can I fix this so that a tr is only 20% of the page height? Thank you.

Upvotes: 0

Views: 1143

Answers (2)

A. Meshu
A. Meshu

Reputation: 4148

You can use Viewport units (the browser window size). 100vh is the height of the screen and 100vw is the width of the screen.

If the table higher you can use the min-height property and set it to 100vh.

If i understood the question, i think this css would do what you need:

td {width: 20vw;}
tr {height: 20vh;}
table {width: 100%; min-height: 100vh;}

Hope it helps.

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/length

Upvotes: 1

Erlisar Vasquez
Erlisar Vasquez

Reputation: 460

It's the conflict between the style of your tr and td. Try removing one each and see the difference. It's not possible to set different heights of the two since td is embedded in tr.Hope this helps.

Upvotes: 0

Related Questions