Html 溢出隐藏不适用于 100% 宽度和高度的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7461234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow hidden not working on container with 100% width and height
提问by Odyss3us
I am trying to get a image to fill up the viewport and auto resize when the browser gets resized, which is working, the only problem is that for some reason I can't get the image to NOT extend outside of the #wrapperelement, even though it has overflow set to hidden, I am assuming it is because I am using percentages instead of a fixed width and height?
我正在尝试获取图像以填充视口并在浏览器调整大小时自动调整大小，这是有效的，唯一的问题是由于某种原因我无法使图像不扩展到#wrapper元素之外，即使它已将溢出设置为隐藏，我假设这是因为我使用的是百分比而不是固定的宽度和高度？
Now when I put overflow: hidden;on the body element it works, but then when you select text anywhere on the page and drag down, it scrolls down to the bottom of the image, which is problematic as I have a footer menu that is absolutely positioned to the bottom of the screen, which then moves up with the image as it is dragged down, and ruins the whole effect.
现在，当我放置overflow: hidden;body 元素时它可以工作，但是当您在页面上的任何位置选择文本并向下拖动时，它会向下滚动到图像的底部，这是有问题的，因为我有一个绝对定位到屏幕底部，然后随着图像向下拖动而向上移动，从而破坏了整个效果。
So basically I just want to have a auto resizing background, that doesn't overflow the viewport and cause scrollbars, and that allows your positioned content to stay where it is and not scroll up when you drag down on selected text.
所以基本上我只想有一个自动调整大小的背景，它不会溢出视口并导致滚动条，并且当您向下拖动所选文本时，它允许您定位的内容保持原位并且不会向上滚动。
HTML:
HTML：
<html>
<head>
<title>project</title>
</head>
<body>
<div id="wrapper">
<div id="content">
<img src="image.jpg" width="1400" height="1200" />
</div>
</div>
</body>
</html>
CSS:
CSS：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content {
width: 100%;
height: 100%;
}
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
回答by scott
I know this is an old post, but for the benefit of others, since position:fixed isn't the most compatible way either, changing your #wrapper element to have position:relative; solves the problem.
我知道这是一篇旧帖子，但为了他人的利益，因为 position:fixed 也不是最兼容的方式，将 #wrapper 元素更改为具有 position:relative; 解决了这个问题。
Thanks, Scott
谢谢，斯科特
回答by Odyss3us
Ok, got it working, I changed this
好的，让它工作，我改变了这个
#wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
to this
对此
#wrapper img {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
so as you can see, all I changed was the positionproperty, from absoluteto fixed, and that did the trick. :)
如您所见，我所做的只是更改了position属性，从absoluteto fixed，然后就成功了。:)
回答by Gerben
Use CSS backgrounds instead of html img elements. You can use background-sizeto resize the image.
使用 CSS 背景而不是 html img 元素。您可以使用background-size来调整图像大小。
