如何始终使页面内容显示在导航栏下方?

时间:2013-01-18 18:27:50

标签: javascript html css layout positioning

我希望我的页面内容始终显示在导航栏下方,类似于此页面的工作方式:

http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar

您可以在内容中向下或向上滚动,但导航栏永远不会消失。

为此,我使用position:fixed将导航栏修复到页面顶部。这样做有效,但我仍然可以上下滚动内容,使其在“导航”栏上运行,当我希望内容始终被推到导航栏下方时。

关于如何做到这一点的任何想法?这是包含导航的<ul id='navigation'>的css代码:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
}

#navigation li
{
    display: inline-block; 
    width: 150px;
    height: 110px;
    cursor: pointer;
}

这是<div id="container">的css,它显示在#navigation下面并且包含所有页面内容正文:

#container
{
    position: absolute;
    margin-top: 180px;
    font-size: 25px;
    width: 90%;
}

4 个答案:

答案 0 :(得分:2)

它经历的原因是您没有为导航栏设置背景颜色。试试吧。

编辑:查看您的源代码。用style:

替换style.css文件中的导航CSS
#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
    background-color: #FFFFFF;
    z-index:999;
}

问题是z-index。将其置于999会将导航栏放在所有其他元素的顶部。

答案 1 :(得分:1)

你可以使用属性z-index:xxx,你试过吗?

答案 2 :(得分:1)

多年前使用相同的功能创建了我的网站。我选择了Server Side Includes,它运行良好。我创建了一个“标题”导航链接和每个页面上包含的“页脚”。

答案 3 :(得分:0)

您是否尝试添加data-role="header"

<div data-role="header" data-position="fixed">