CSS - what is difference between height: 100% and height: 100vh?

The vh values stand for viewport height.

Here is the main difference:

• height: 100vh means 100% of the viewport height,
• height: 100% means 100% of the parent's element height.

Warning:

When you use % for vertical margin or padding, percentage values will be calculated on the width of the parent element, not the height.

See also

1. CSS - 100vh meaning