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