I want to create div of width equal to view port of browser but it is not working when I apply width:100vh to the body, here is my coding

body {
  font-family: Staatliches;
  font-size: 25px;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  width: 100vh;
}

.bg {
  height: 100vh;
  /* width: 100%; */
  width: 100vh;
  background-color: red;
}

<div class="bg"></div>

I want to create div of width equal to view port of browser but it is not working when I apply width:100vh to the body, here is my coding

body {
  font-family: Staatliches;
  font-size: 25px;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  width: 100vh;
}

.bg {
  height: 100vh;
  /* width: 100%; */
  width: 100vh;
  background-color: red;
}

<div class="bg"></div>

• javascript
• html
• css

• I've done stuff similar to this before but I usually pair heights and widths together: height: 100vh; width: 100vw; – Corey Ogburn Commented Jun 7, 2021 at 17:49

2 Answers 2

just a silly mistake !!

u have used 100vh in width which mean the width of the div will be height of the view port but u want the div's width to be 100% of viewport so use 100vw instead of 100vh

1vh = 1 / 100 of viewport height

1vw = 1 / 100 of viewport width

body {
  font-family: Staatliches;
  font-size: 25px;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

.bg {
  height: 100vh;
  /* width: 100%; */
  width: 100vw;
  background-color: red;
}

<div class="bg"></div>

You need to add html { margin: 0; height: 100%; }