溢出：我的div的隱藏是允許我的窗口高度在不應設置的情況下真正為100％

Question

我對CSS很陌生，我做了我打算做的事情，那就是使div的窗口寬度和高度為100％，這樣它就可以填滿我的窗口了。 但是，我感到困惑的是我必須添加：

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

當我不添加overflow: hidden; 我的myDiv上方有一些空格，這是我的html的第一個div。 為了避免這種情況，我遇到了overflow：hidden，但是overflow：hidden的想法是應該剪切div的內容。 但是，在我的情況下，在添加overflow:hidden;之后，myDiv的內容將擴展為覆蓋空白overflow:hidden; 為什么會這樣？

Answer 1

正文元素的邊距設置為8px，這就是為什么。

使用vw和vh ：（不完全支持）請參見我可以使用vieuwport裝置

 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; } * { margin : 0; } 。

這是代碼段。

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

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

Answer 3

所有瀏覽器都在網頁邊緣周圍設置了填充或邊距，以使屏幕旁邊沒有文字。

如果您使用vw和vh它們指定為視口高度/寬度的100％），則也不需要使用overflow: hidden屬性。

這需要在您的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> 

• 視口單位