Question

我将宽度和高度设置为100％，但没有显示任何内容。我只想让宽度和高度与屏幕相同。

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

Answer 1

你的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>

或者像这样：

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>

Answer 2

问题在于身高：100％。仅当父级的高度也设置为100％时，此方法才有效。因此，您有多种解决方案，这取决于您的用例最佳。

将每个父级设置为100％。如果你的元素在body标签中是正确的，或者下面没有嵌套，那么这很好用。
将位置设置为绝对值，将高度设置为100％。如果没有其他父元素已经定位并且其大小小于您的屏幕，则此方法有效。
使用vh单位代替％。 100vh等于100％，但始终相对于浏览器窗口视口高度。

Answer 3

试试这个片段......

#div {
    height: 100vh;
	cursor:url('http://s13.postimg.org/nziz57hab/cursor.png'), auto;
    background-color:green
}

<body>
  <div id="div"></div>
  </body>

Answer 4

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

你怎么做一个像屏幕一样大的div？

4 个答案:

标题