Html 如何隐藏屏幕边缘的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6746649/
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
How can I hide an element off the edge of the screen?
提问by lavelle
I've got a div that I want to position partially off-screen like so:
我有一个 div，我想将它部分放置在屏幕外，如下所示：
div{
position: absolute;
height: 100px;
width: 100px;
right: -50px;
top: 50px;
}
But this increases the size of the page, allowing it to be scrolled to the right. Is there any way to keep half of this div hidden and prevent scrolling to view it?
但这会增加页面的大小，使其可以向右滚动。有什么办法可以隐藏这个 div 的一半并防止滚动查看吗？
回答by HymanJoe
Yes, just create an enclosing div with overflow: hidden, like this:
是的，只需创建一个封闭的 div overflow: hidden，就像这样：
.outer {
overflow: hidden;
position: relative;
}
.inner {
position: absolute;
height: 100px;
width: 100px;
right: -50px;
top: 50px;
}<div class="outer">
<div class="inner">
CONTENT
</div>
</div>Example: http://jsfiddle.net/Uj3eQ/
回答by Aaditi Sharma
Just add overflow:hiddento the css. That should do the trick.
只需添加overflow:hidden到css。这应该够了吧。
回答by Alex Ackerman
Just insert this div inside another div with overflow:hidden
只需将此 div 插入另一个 div 中 overflow:hidden
回答by Sami Fouad
Another solution is to use margin-left: 100%;
另一种解决方案是使用 margin-left: 100%;
And if you wanted to play with the positioning a bit, you can do something like margin-left: calc(100% + 10px);
如果你想稍微调整一下定位，你可以做类似的事情 margin-left: calc(100% + 10px);
And another alternate way is to do float: right;and then play around with margin-right -50px;where 50px is the width of the hidden div. You could even have a neat transition if you animate the margin-rightif you were making a menu.
另一种替代方法是float: right;使用margin-right -50px;50px 是隐藏 div 的宽度。margin-right如果您制作菜单的动画，您甚至可以有一个整洁的过渡。
回答by ferne97
You could add a media query to avoid scrolling at a certain point. So basically take the width of your main container and create a min-width media-query using that.
您可以添加媒体查询以避免在某个点滚动。所以基本上采用主容器的宽度并使用它创建一个最小宽度的媒体查询。
@media (min-width: 960px) {
body {
overflow-x: hidden;
}
}
Should work for modern browsers.
应该适用于现代浏览器。
回答by Mark1270287
I had a similar situation where I needed an absolutely placed element to be positioned partially to the right of the main content header. If the browser was wide enough to show it, I did NOT want to clip it (overflow: hidden;) but I also did not want to make the scrollbar appear if the browser was not wide enough.
我遇到过类似的情况，我需要一个绝对放置的元素，将其部分定位在主要内容标题的右侧。如果浏览器足够宽以显示它，我不想剪辑它（溢出：隐藏；）但如果浏览器不够宽，我也不想让滚动条出现。
Here is the code I used:
这是我使用的代码：
@media screen and (max-width: 1275px) {
#header {
overflow-x: hidden;
}
}
回答by monk
scroll is may be you have placed relative position property to the containing div and it result the required div to go off the right by -50 but as relative to the main containing div not the browser viewable area.. if its parent div just inside the body tag or the parent div does not include any position property your code should work.. and again you can apply overflow:hidden property to wrapper div to hideout the unnecessary part
滚动可能是您已将相对位置属性放置到包含 div 并导致所需的 div 向右偏移 -50 但相对于主包含 div 而不是浏览器可查看区域 .. 如果其父 div 就在body 标签或父 div 不包含您的代码应该工作的任何位置属性..并且您可以再次将溢出：隐藏属性应用于包装 div 以隐藏不必要的部分
