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>
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
2 Answers
Reset to default 5just 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, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论