admin管理员组

文章数量:1325497

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
Share Improve this question edited Jun 7, 2021 at 17:39 mplungjan 178k28 gold badges181 silver badges240 bronze badges asked Jun 7, 2021 at 17:33 mujtaba hussainmujtaba hussain 111 gold badge3 silver badges8 bronze badges 1
  • 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
Add a ment  | 

2 Answers 2

Reset to default 5

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%; }

本文标签：

版权声明：本文标题：javascript - Body height and width is 100vh; and the div in this has width 100vh or 100% but it is not touching the edge ?why - 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742198736a2431563.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。