Overflow hidden not working on container with 100% width and height
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 #wrapper element, 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?
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.
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:
<ht开发者_开发问答ml>
<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:
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%;
}
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.
Thanks, Scott
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 position property, from absolute to fixed, and that did the trick. :)
Use CSS backgrounds instead of html img elements. You can use background-size to resize the image.
加载中,请稍侯......
精彩评论