Question

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

请转到链接。

菜单是固定位置，向下滚动时会显示，这就是我想要的。

你可以看到有很多菜单和固定menuWrapper有100％宽度和包装内的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>

Answer 1

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

#content { overflow: auto; }

Answer 2

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

以下是执行以下操作的codepen：

小于1240px的浏览器窗口（视口）（或没有媒体查询支持）获得允许菜单项包装的菜单版本，没有水平滚动条（我将“width：1240px”替换为“min-width” ：1240px“
大于1240px的视口（具有媒体查询支持）获得完整的固定菜单宽度处理。

媒体查询可能必须以不同的宽度进行调整，但一般概念应保持不变。

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

我希望这很有帮助。

Answer 3

问题就在于你上面所说的。 “固定宽度”为1240像素，屏幕尺寸为1024像素。在没有div溢出的情况下，在不小于1240像素的屏幕上显示1240像素的div是不可能的，无论是进入其他内容还是通过滚动条，具体取决于您的溢出设置。你可以尝试两件事之一。删除#menu div的高度并指定宽度将导致内容换行并显示在新行上。或者，指定宽度和高度将导致内容溢出并添加滚动条。要确保跨浏览器发生此行为，您可以添加：

#menu { overflow: auto; }

希望这有帮助。

如何固定宽度与固定子div？

3 个答案: