Question

我在下面有这个简单的HTML，它有一个div，绝对位置0,0到100％，100％。在div内是宽度为100％，高度为100％的图像。我在这个例子中使用了谷歌图片，但它可以是任何图像。

它会创建一个垂直滚动条（无论如何都在Chrome中）。

有谁知道如何避免这种情况。我知道我可以添加“overflow：hidden”，但如果页面上的其他内容超出了100％的屏幕高度，我希望它能够滚动。所以我不想这样做。

我也可以高度：99％，但这并不是很优雅。

<!DOCTYPE html>
<html style="margin: 0px; padding: 0px; height: 100%; width: 100%;">
    <body style="margin: 0px; padding: 0px; height: 100%; width: 100%;">
        <div id="divBackDrop" style="position: absolute; top: 0px; left: 0px; height:100%; width: 100%; border: 0px solid red;"><img src="https://www.google.com/images/srpr/logo11w.png" style="height: 100%; width: 100%;" /></div>
    </body>
</html>

看起来它应该按原样运行 - 我的意思是没有水平滚动条，宽度设置完全相同。

Answer 1

您面临的问题是<img>是一个内联元素，因此会添加一个空格。

为了防止您向图片添加display:block;。

<强> FIDDLE

BTW，不推荐使用内联CSS样式。

Answer 2

你所做的是正确的！但是，当图像足够大以进入滚动区域时，Chrome等浏览器会添加滚动条。相反，你应该试试这个......

<!DOCTYPE html>
<html style="">
<body style="margin: 0px; padding: 0px;height:100%;width:100%;position:fixed;">
   <img src="https://www.google.com/images/srpr/logo11w.png" style="height: 100%; width: 100%;" />
</body>
</html>

HTML / CSS - 在div中具有100％高度的简单图像显示滚动条

2 个答案: