How does height of the body work in Solid Playground?

This may just be a lack of understanding of CSS but in my defense, CSS is hard. Here is the link to the component I'm prototyping in the playground: https://playground.solidjs.com/anonymous/962a237f-cfbd-4a77-bc7f-f2034bdbd5fa.

What I'm wondering is why my

Open Modal

Open Modal

button is centered on the height of the window without considering the console whereas the actual modal is centered in the viewable space accounting for the console. The button is centered in a flexc container with a height of

100vh

100vh

whereas the modal is centered with

position: absolute, top: '50%', left: '50%', transform: 'translate(-50%, -50%)'

position: absolute, top: '50%', left: '50%', transform: 'translate(-50%, -50%)'

.

Is this a specific behavior of the solid playground or is this a CSS specific thing with heights that I don't understand?

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

SolidJS•4y ago•

5 replies

jesseb34r

How does height of the body work in Solid Playground?

Open Modal

Open Modal

100vh

100vh

whereas the modal is centered with

position: absolute, top: '50%', left: '50%', transform: 'translate(-50%, -50%)'

position: absolute, top: '50%', left: '50%', transform: 'translate(-50%, -50%)'

.

Is this a specific behavior of the solid playground or is this a CSS specific thing with heights that I don't understand?

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

How does height of the body work in Solid Playground?

Similar Threads

How does height of the body work in Solid Playground?

Similar Threads

Similar Threads

Similar Threads