最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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 -

programmeradmin6浏览0评论

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>

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

发布评论

评论列表(0)

  1. 暂无评论