HTML/CSS-显示100%高度的div内简单图像的滚动条_Html_Css

HTML/CSS-显示100%高度的div内简单图像的滚动条

html css

HTML/CSS-显示100%高度的div内简单图像的滚动条,html,css,Html,Css,下面我有一个简单的HTML，它有一个div，绝对位置是0,0到100%，100%。在div中是宽度为100%、高度为100%的图像。我在这个例子中使用了谷歌图片，但它可以是任何图片它创建了一个垂直滚动条（无论如何在Chrome中）有人知道如何避免这种情况吗。我知道我可以添加“溢出：隐藏”，但如果页面上有其他内容超出100%屏幕高度，我希望它滚动。所以我不想那样做我也可以把它做得很高：99%，但这并不十分优雅 <!DOCTYPE html> <html style="mar

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

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

有人知道如何避免这种情况吗。我知道我可以添加“溢出：隐藏”，但如果页面上有其他内容超出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>

看起来它应该是这样工作的-我的意思是没有水平滚动条，宽度设置完全相同

你所做的是正确的！然而，像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>

您面临的问题是

是一个内联元素，因此会添加一个空格

为了防止出现这种情况，您可以添加

display:block到图像

顺便说一句，不推荐内联CSS样式。
我理解你的观点，这是公平的。你是否正在尝试制作背景图像？是的，但我希望它可以扩展到屏幕大小，而不考虑外观等。您好，请查看我的答案，并更改样式以满足您的需要谢谢。您应该注意位置是position:fixed@Henrix我认为这不是一个好的解决方案，因为如果您的内容溢出了
标记，您将永远不会有滚动条。新增位置：固定
to body不仅是一种非常糟糕的做法，它不能解决OP的问题，只能为OP的问题提供补丁-1.