0

http://themorpheustech.com/test/test1.php

请转到链接。

菜单是固定位置，当你向下滚动它会显示，这正是我想要的。

您可以看到有很多菜单，Fixed menuWrapper 具有 100% 的宽度，而 Wrapper 内的 div 具有固定宽度（1240px），因为它有 19 个菜单。

好的，问题是当我在低分辨率监视器中看到该网站时：1024px 监视器，用于测试只需调整浏览器窗口的大小。一切正常，我的意思是固定的主菜单。但问题是它显示到菜单 18，并且浏览器窗口底部有一个水平滚动条，如果我滚动它，网站的内容会显示除菜单之外的所有内容？看到它显示到菜单 18。

我需要在 CSS 或 Jquery 中解决这个问题。

我使用的代码：

<style type="text/css">
html, body {
    margin:0px;
    padding:0px;
}
#menuWrapper {
    position:fixed;
    width:100%;
    height:80px;
    background-color:#999;
}
#menu {
    position:relative;
    width:1240px;
    margin:0 auto;
    height:80px;
    white-space: nowrap;
}
#content {
    padding-top:90px;
    width:1240px;
    background-color:#F3F3F3;
    margin:0 auto;
}
</style>

<div id="menuWrapper">
    <div id="menu">
        Menu 1 | 
        Menu 2 | 
        Menu 3 | 
        Menu 4 | 
        Menu 5 | 
        Menu 6 | 
        Menu 7 | 
        Menu 8 | 
        Menu 9 | 
        Menu 10 | 
        Menu 11 | 
        Menu 12 | 
        Menu 13 | 
        Menu 14 | 
        Menu 15 | 
        Menu 16 | 
        Menu 17 | 
        Menu 18 | 
        Menu 19 
    </div>
</div>
<div id="content">
    Website Content<br />
    Website Content<br />
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
4

3 回答 3

1

问题是#menu 比浏览器窗口宽，它为您提供水平滚动条。使用overflow: auto或overflow:hidden不是最佳选择，因为第一个会导致水平滚动条，而第二个会向用户隐藏菜单项。

这是一个执行以下操作的代码笔：

  1. 小于 1240 像素（或不支持媒体查询）的浏览器窗口（视口）获得允许菜单项换行的菜单版本，没有水平滚动条（我将“宽度：1240 像素”替换为“最小宽度：1240 像素”
  2. 大于 1240 像素的视口（支持媒体查询）获得完整的固定菜单宽度处理。

媒体查询可能需要以不同的宽度进行调整，但总体概念应该保持不变。

您可以使用response.js在旧版浏览器中获得媒体查询支持。

我希望这会有所帮助。

祝你好运！

于 2012-10-03T18:52:20.953 回答
1

固定宽度似乎完全符合它的预期：无论屏幕分辨率如何，都显示相同的宽度。如果您想显示不同的宽度，请考虑 CSS3 媒体查询http://cssmediaqueries.com/。相反，如果您遇到的问题是框中的内容滚动，您可以像这样设置它：

#content { overflow: auto; }
于 2012-10-03T16:46:48.580 回答
1

问题就是你上面说的。“固定宽度”为 1240 像素，屏幕尺寸为 1024 像素。根据您的溢出设置，不可能在小于 1240 像素的屏幕上显示 1240 像素的 div 而不会溢出 div 到其他内容或通过滚动条。您可以尝试以下两种方法之一。删除#menu div 的高度并像您所做的那样指定宽度将导致内容换行并显示在新行上。或者，指定宽度和高度将导致内容溢出并添加滚动条。要确保跨浏览器发生此行为，您可以添加：

#menu { overflow: auto; }

希望这可以帮助。

于 2012-10-03T19:00:16.133 回答