Question

我是CSS的新手，我做了我打算做的事情，这是为了让我的窗口宽度和高度为100％，所以它填满了我的窗口。但是，我感到困惑的是我必须添加：

    .myDiv{
    height:100%;
    width:100%;
    overflow: hidden;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
   ) repeat;
}

当我没有添加overflow: hidden;时，我在myDiv上面有一些空白，这是我的html的第一个div。为了避免这种情况，我遇到了溢出：隐藏但溢出的想法：隐藏的是div的内容应该被剪裁。但是，在我的情况下，myDiv的内容在添加overflow:hidden;之后会扩展为覆盖空白为什么会这样？

Answer 1

body元素的边距设置为8px，这就是原因..

使用vw和vh :(不完全支持）请参阅can i use vieuwport units

body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  background-color: green;
}

<div>MAGIC</div>

具有％高度的

~~不会影响块元素：~~ 块元素的Eumz宽度为100％，无需再次定义

body {
  margin: 0;
}
div {
  background-color: green;
}

<div>MAGIC</div>

编辑：最终

body {
  margin: 0;
}
div {
  min-height: 100vh;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}

<div>MAGIC</div>

Answer 2

在开头添加 * { margin : 0; } 。

以下是摘录。

＆＃13;

* {
  margin : 0;
}
.myDiv {
  position : absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC) repeat;
}

＆＃13;

<div class='myDiv'></div>

＆＃13;

Answer 3

所有浏览器都在网页边缘设置了填充或边距，以便屏幕旁边没有文字。

如果您使用overflow: hidden和vw指定为视口高度/宽度的100％，则您也无需使用vh属性。

这需要在CSS中重置：

html,
body {
  padding: 0;
  margin: 0;
}
.myDiv {
  height: 100vh;
  width: 100vw;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}

<div class="myDiv"></div>

Viewport Units

溢出：隐藏我的div是允许我的窗口高度真正100％，当它不应该

3 个答案: