如何使div和屏幕一样大？
[英]How do you make a div as big as screen?
问题描述
I set the width and height to 100%, yet nothing shows up. 
我将宽度和高度设置为100％，但没有任何显示。 I just want the width and height to be the same as the screen. 我只希望宽度和高度与屏幕相同。
Here's the fiddle. 这是小提琴。 http://jsfiddle.net/wNKcU/1016/ http://jsfiddle.net/wNKcU/1016/
HTML: HTML：
<body>
<div id="div"></div>
</body>
CSS: CSS：
#div {
background: #111;
height: 100%;
width: 100%;
cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
}
4 个解决方案
解决方案1
3 2016-03-14 23:02:38
Your div is right, you just need to set the body like this: 您的div是正确的，您只需要像这样设置主体即可：
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>
解决方案2
1 2016-03-14 23:08:37
To problem lies in the height: 100%. 问题在于高度：100％。 This works only, if the height of the parent is set also to 100%. 仅当父级的高度也设置为100％时，此方法才有效。 Therefore, you have several solutions and it depends on your use case what is best. 因此，您有几种解决方案，这取决于您的用例，哪种才是最好的。
Set every parent to 100%.
将每个父级设置为100％。 This works good, if your element is right in the body tag or not nested a lot below. 如果您的元素恰好位于body标签中，或者未嵌套在下方，则效果很好。 Set the position to absolute and the height to 100%.
将位置设置为绝对，将高度设置为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 %.
使用vh单位而不是％。 100vh is equal to 100% but is always relative to the browser window viewport height. 100vh等于100％，但始终相对于浏览器窗口的视口高度。
解决方案3
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>
解决方案4
-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 标题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.