Question

我的屏幕顶部有一个固定的菜单，效果很好，但是当我让浏览器窗口变小时，而不是菜单中的所有元素都保持原样，它们都会在菜单下方下拉留在开着的窗户。我的想法是，当窗口变小时，我希望位置不会固定，因此它们保持原位并可以滚动查看其余内容。这可能吗？

以下是菜单标题的html代码：

<div id="head_wrapper">
        <div id="head_company"></div><!---end head_company--->
        <div id="head_name"></div><!---end head_name---->

        <div id="head_search"></div><!---end head_search--->
        <div id="head_home" onclick="location.href='overview.php';"></div><!---end head_home--->
        <div id="head_settings" onclick="location.href='settings.php';"></div><!---end head_settings--->
        <div id="head_more"></div><!---end head_more--->


    </div><!---end head_wrapper--->

以下是css：

#wrapper #head_wrapper {
    background-image: url(../images/general/head_bar.png);
    background-repeat: repeat-x;
    float: left;
    height: 44px;
    min-width: 100%;
    width: auto !important;
    width: 100%;
    position: fixed;
    z-index: 10;
    margin-left: 208px;
}
#wrapper #head_wrapper #head_company {
    background-image: url(../images/general/navs/arion_co_button.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_company:hover {
    background-image: url(../images/general/hover/company_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_name {
    background-image: url(../images/general/navs/arion_logo.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 144px;
}
#wrapper #head_wrapper #head_more {
    background-image: url(../images/general/navs/head_more.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;

}
#wrapper #head_wrapper #head_more:hover {
    background-image: url(../images/general/hover/head_more_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings {
    background-image: url(../images/general/navs/head_settings.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings:hover {
    background-image: url(../images/general/hover/head_settings_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home {
    background-image: url(../images/general/navs/head_home.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home:hover {
    background-image: url(../images/general/hover/head_home_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_search {
    background-image: url(../images/general/navs/search_bar.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 327px;
    margin-right:15px;
    background-position-y: 5px;
    margin-left:31%;
}

感谢您提供的任何帮助

Answer 1

将#wrapper和#head_wrapper样式更改为：

width: 100%
min-width: 960px; /* set here a fixed value >= menu width */

演示：http://jsfiddle.net/uPe2L/9/（为了清晰起见，我删除了边距和背景并添加了边框）

不过，你的代码错了而且很乱。您应该使用ul li结构。

固定标题元素在窗口上移动减少

1 个答案: