Next.js: height: 100vh not working when width: is set at 100vh on mobile-CodePudding

I know that it is bad practice to use height: 100vh on mobile for multiple reasons. However, how come height: 100vh is not respected when it is coupled with width:100vh in Next.js? I get a square that doesn't take the full height of the page / browser. It only happens on mobile, not when I resize my window. The same happens in Chrome and Firefox.

section {
  background: blue;
  height: 100vh;
  width: 100vh;
 }

<section></section>

CodePudding user response：

height: 100vh; means 100% virtual height. For width, use:

width: 100vw;

Hope this helps.

CodePudding user response：

I think you should set width as width:100vw and also put something inside section.

<section>
  <div>
    <p>This is my section</p>
  </div
</section>

// styles.css

    background: blue;
    height: 100vh;
    width: 100vw;