How to get the canvas takes all the space available..

[Nockawa]

Ok guys, I know this is not strictly about BabylonJS, but I hope that some of you already faced this issue and have an answer.

My HTML skills are very close to...nothing, but I spent a good amount of time searching, trying before asking for help.

All I want to do is using Bootstrap to create an header and footer, and I want my canvas to take the WHOLE space available between these header & footer.

Is there really no way to get out of this without some JavaScript code? What is the best way to go ?

I've made a fiddle for you to understand clearly what I'd like to achieve.

https://jsfiddle.net/nockawa/z0L72nn1/33/

Thanks for your help.

 

[Vousk-prod.]

This is a CSS related question.

Just do this in your CSS :

#myCanvasID {
   width: 100%;
   height: 100%;
}

Where myCanvasID is the id of your HTML canvas element.

[Nockawa]

Have you looked at the fiddle?

I believe I already does that, and still it doesn't work...

[JazzAceman]

Make sure that all parent elements are also set to 100% width / height.

[Nockawa]

raaaaaaaaah, at last !!! I've made it! I analyses the CSS of the Babylonjs playground, replicate everything until I could find the answer and also the culprit !

https://jsfiddle.net/nockawa/z0L72nn1/34/

In my case I was doing EVERYTHING right, except one little tiny thing: the bootstrap container must be defined with "position: absolute" then I use the top/bottom/height to specify the placement of it, and it works !

HTML/CSS are a mess...