Question 45506 in CSS Question posted in
Some basic documentation can be found here.

Different html body height for virtually same React code – CSS

I tried to replicate the react-resizable-panels example component usage by copying over the code to Codesandbox. But in the codesandbox, the content doesn’t take up the whole viewport height. There’s absolutely no difference in styles as far as I can tell. The body height is 100%. It seems to expand it to full-height only in the react-resizable-panels example.

Here are the two identical code examples for reference:

Any help with debugging the difference between the two examples would be highly appreciated.
Thanks. 🙂

Tags:

2

Answers


  1. 0

    height: 100% requires a parent element to reference for height. I’m actually more surprised that the first example goes to full height.

    Either way, adding height: 100vh; to your <div id="root"> element (ie. parent element) will give you full height. Optionally, you could add it to the element that’s currently set to height: 100%.

    Login or Signup to reply.
  2. 0

    It looks like the missing <!Doctype html> makes react-resizable-panels example revert back to ‘quirks’ mode and cause html and body take up 100% of the page height. Just tested with a quick code and below is the result.

    See thoroughly for the structure in both and their respective computed height.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search