Page goes blank when we set Diagram Div Height as 100%

[mohanr.k]

I observed that my page is blank and diagram is not displayed when I tried to to set Diagram Div Height as 100%. I referred the solution provided in below link and div's all parent elements are already has Height as 100% and min-height as 100%.

Setting Diagram Div Height in %

I also observed height of canvas under diagram div is getting changed to 1px when I set div height in %. Any help on this issue is appreciated.

[walter]

First, if you set height: 500px, does everything display and operate as expected?

As documented, https://developer.mozilla.org/en-US/docs/Web/CSS/height, percentage heights are fractions of the container's height. You'll need to debug that by inspecting in the browser to see where the short height is coming from.

[mohanr.k]

Yes when I set height:500px its working as expected

[simon]

This is an HTML issue, not a GoJS issue.

You'll probably need to set the height of the html CSS element, and maybe also the body, to 100%.

html, 
body {
    height: 100%;
}

Otherwise, your div will not have a 100% height.

Example codepen