CODEWITHSUNDEEP
htmlcsshtml-table
tacamula
tacamula

Reputation: 3

div height by percentage doesn't works on Chrome 63

I found style is broken in my website without change on code when I use Chrome. Even though, when I confirmed with Firefox and Safari, it works well and I remember it also worked before I update Chrome.

I tried to figure out what this causes, but could not.

https://jsfiddle.net/3ttou4jv/1/

table {
  height: 100%;
}

td {
  height: 100%;
  background: none repeat scroll 0 0 #565656;
  vertical-align: top;
}

.td-inner {
  height: 100%;
  background: none repeat scroll 0 0 #e1e1e1;
}

Is there mistake on code, or this is the way Chrome's css interpretation?

Upvotes: 0

Views: 829

Answers (2)

Andrew Bone
Andrew Bone

Reputation: 7291

I tested this in Firefox and it looked the same as chrome, I think this will answer the underlying issue though.

When you use a percent you are saying be this much of your parent if the parent is 100px tall and you set the child's height to 100% the child will be 100px.

In this instance .table_root, table's parent, is just taking up as much space as it needs.

You can fix this by setting HTML, body and .table_root to 100%, which will take up 100% of the screen. Alternatively, you can use vh rather than % vh is viewport height 100vh equates to 100% of the viewport height.

Example with %

body, html {
  height: 100%;
  margin: 0;
}

div {
  height: 100%;
  background: tomato;
}
<div>100% example</div>

Example with vh

body {
  margin: 0;
}

div {
  height: 100vh;
  background: tomato;
}
<div>vh example</div>

I hope this helps 🙂

Upvotes: 1

Mark Baijens
Mark Baijens

Reputation: 13222

Setting html/body and .table_root to 100% fixes the issue.

body,html {
  height: 100%;
}

.table_root {
  height: 100%;
}

https://jsfiddle.net/3ttou4jv/2/

Upvotes: 0

Related Questions