-1

I have a div, its style is style={{ width: '100%', height: '100%', overflow: "hidden" }}, but in f12 the div is 100% by 0

the div jsx component:

return (
    <div style={{ width: '100%', height: '100%', overflow: "hidden" }}>
        {/* some code */}
    </div>
)

App.css style:

body, html {
    text-align: center;
}

The elements that wrap this div don't have any styles.

Pavel Fedorovsky
  • 47
  • 6
  • 2
    This is not a React issue but purely a CSS one. It is 100% relative to the parent. What is the parent? – Terry Oct 25 '22 at 05:30
  • if the parent has no height, the child has 100% of nothing if the child has no content – c.m. Oct 25 '22 at 05:31

1 Answers1

0

If you need a particular div height, you can use px rather than a percentage. And if you need the full height of the screen, you can use viewport height.

Example:

style={{ width: '100%', height: '100vh'}}

Limon Safayet
  • 69
  • 6