[英]Hide a div if it overlaps another div
I have my main content in the center of the page about 900px wide. 我的主要内容位于页面中心,宽度约为900px。 on a large screen there is enough space between the right margin of my content and the right side of the browser window that I can display a small 100x100px div in the bottom right corner and it looks good because there is no overlap between that div and the main content.
在大屏幕上,我的内容的右边缘和浏览器窗口的右边之间有足够的空间,我可以在右下角显示一个小的100x100px div,它看起来很好,因为该div和主要内容。 When the screen size is less that div which is relatively positioned overlaps with the bottom right corner of my content.
当屏幕尺寸小于相对位置的div与我的内容的右下角重叠时。 How can I set the display=none of the div if it comes within 20px of my content?
如果它在我的内容的20px范围内,我怎么能设置display = none? Thanks
谢谢
I'd go for a pure CSS solution here. 我会在这里寻找纯CSS解决方案。 Sounds like a perfect case for
media queries
: 听起来像
media queries
的完美案例:
#rightdiv {
position: relative;
width: 100px;
height: 100px;
}
@media screen and (max-width: 1000px) {
#rightdiv {
display: none;
}
}
That CSS will only display the #rightdiv
element when the browser window size has at least 1000px width. 当浏览器窗口大小至少为1000px宽度时,CSS将仅显示
#rightdiv
元素。 If it gets smaller, it applies the display: none
property. 如果它变小,则应用
display: none
属性。
Example : http://jsfiddle.net/7CCtH/ 示例 : http : //jsfiddle.net/7CCtH/
As for media queries are not familiar with IE I suggest you kindly this solution for your problem : 至于媒体查询不熟悉IE我建议你为你的问题解决这个问题 :
code used: 使用的代码:
function hideSmall(){
var smallW = $('#small').outerWidth(true);
var winW = $(window).width();
var mainW = $('#main').outerWidth(true);
var calculateW = (winW-mainW)/2;
if ( calculateW <= smallW ){
$('#small').hide();
}
else{
$('#small').show();
}
}
hideSmall();
$(window).resize(function(){
hideSmall();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.