Question

请查看此jsfiddle

<!DOCTYPE html>
<html lang='en'>
<head> 
    <style>
        body { height: 100%; margin: 0; padding: 0;}
        div { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background: black;}
        img { height: 100%;}
    </style>
</head>

<body>
    <div><img src='https://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg'></div>
</body>
</html>

即使两者都设置高度100％，底部仍然没有多余的空间导致滚动条。有谁知道导致这个空间的原因是什么？

我只是想知道这种行为。

谢谢！

Answer 1

img标记是内嵌标记，您看到的额外空间是由此引起的。将display:block添加到图片样式。

img得到超大的窗户

1 个答案: