How do you make a div as big as screen?
Question
I set the width and height to 100%, yet nothing shows up. I just want the width and height to be the same as the screen.
Here's the fiddle. http://jsfiddle.net/wNKcU/1016/
HTML:
<body>
<div id="div"></div>
</body>
CSS:
#div {
background: #111;
height: 100%;
width: 100%;
cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
}
4 answers
solution1
3 2016-03-14 23:02:38
Your div is right, you just need to set the body like this:
body { width: 100%; height: 100vh; margin: 0px; } #div { background: #111; height: 100%; width: 100%; cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto; }
<div id="div"></div>
or like this:
html, body { width: 100%; height: 100%; margin: 0px; } #div { background: #111; height: 100%; width: 100%; cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto; }
<div id="div"></div>
solution2
1 2016-03-14 23:08:37
To problem lies in the height: 100%. This works only, if the height of the parent is set also to 100%. Therefore, you have several solutions and it depends on your use case what is best.
Set every parent to 100%. This works good, if your element is right in the body tag or not nested a lot below.
Set the position to absolute and the height to 100%. This works only, if no other parent element is already positioned and has a size which is smaller than your screen.
Use the vh unit instead of %. 100vh is equal to 100% but is always relative to the browser window viewport height.
solution3
0 2017-06-14 10:21:37
Try this snippet...
#div { height: 100vh; cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto; background-color:green }
<body> <div id="div"></div> </body>
solution4
-1 2017-06-14 10:49:07
body{
position: absolute;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
}
#div {
background: #000;
cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
position: absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
}
Heading
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.