奇怪的身体溢出 - CSS

我有麻烦设置图像到身高的100％。我在页面底部获得了这个奇怪的空白区域，尽管我在所有内容中都将margin和padding设置为0。我只能使用overflow-y: hidden，但我更愿意弄清楚它为什么这样做。谢谢！奇怪的身体溢出 - CSS

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<img src="https://images.unsplash.com/photo-1429554429301-1c7d5ae2d42e?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="background" />

来源

2017-03-03 Hudson Taylor

使用vh和vw单位，像魅力一样工作。 – yBrodsky

使用'display：block'。顺便给'*'选择器设置'margin'和'padding'并不是一个好习惯 – Mattonit

@Mattonit谢谢！为什么它不可取？ –