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

GoJS
1

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%.

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.

2

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

As documented, height - CSS: Cascading Style Sheets | MDN, 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.

3

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

4

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