To create height responsive elements in CSS, the vh (viewport height) unit can be used. The vh unit represents the height of the viewport (the visible area of your webpage on your screen). 1vh is equal to 1% of the viewport height.
For example, if you want to create a div that covers half (50%) of the viewport height, you can use:
```
div {
height: 50vh;
}
```
This will make the div responsive to the height of the viewport. As you resize the height of your browser window, the height of the div will change accordingly.
Also, you can use min-height and max-height properties together with vh unit to make it more flexible under different circumstances. For example:
```
div {
min-height: 300px;
height: 50vh;
}
```
In this case, div’s height will be at least 300px but not exceed 50% of viewport height.
It is important to note that vh is not supported in IE8 and below. Also, mobile browsers have differing support for vh. Therefore, be sure to test this thoroughly, or have a fallback for browsers that do not support the vh unit.
