Question

我有一个高度为50px的顶部div，宽度必须是整个浏览器窗口的宽度。我设置`宽度：100％;但问题是，当我放大其他放在里面的内容会重叠到其他内容时。我知道宽度：100％;将始终只与当前缩放的屏幕一样多，这就是内容重叠的原因。

这个div的位置是固定的。我尝试使用jQuery设置宽度并且它可以工作，但是当缩小顶部div时将不会保持最大可用屏幕宽度。

(document).ready(function(){
    var widthT = $(window).width();
    $('#top_status').css("width", widthT);
});

上面的jQuery在放大时很好，但是由于宽度已经设置而没有改变，因此不能缩小。

我正试图以某种方式获得一些像facebook顶级蓝条那样的东西。无论变焦如何，都能很好地保持原位。

thx

Answer 1

如果您发布jsFiddle，我们可以提供具体示例，但您应该能够使用Media Queries处理这些问题。他们可以在调整窗口大小时控制断点，并确保无论站点的分辨率如何，它都能看起来很好。

以下是导航中媒体查询的一些资源：

即使您不想更改结构或将其转换为下拉列表，也可以使用相同的媒体查询来调整菜单元素，使其适合任何位置。