提问者:小点点

固定页脚,具有100高度绝对位置正文和jquery滚动菜单


我正在创建一个1024宽框架的新网站。我需要100%宽度的顶部页眉,页眉,菜单和页脚的100%宽度。但我需要1024 px宽度的内容占位符。我正在尝试设置100%的高度内容。例如,如果内容占位符的内容较少,则页脚需要贴在页面底部;如果内容占位符的内容较多,则需要滚动整个页面。下面是代码示例:

<div style="width: 100%; height: 30px; background: #dddedf url('Images/top-header-bg.png') repeat-x top left;position: relative;">
<div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Top Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 100px; background: #fff url('Images/header-bg.png') no-repeat center center;
    position: relative;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
                <!--Header Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 30px; background: #0D9B8C url('Images/menu-bg.png') repeat-x top left;
    position: fixed;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
            <div style="width: 100%; height: 30px;">
                    <!--Menu Section-->
            </div>
        </div>
    </div>
</div>

<div style="width: 100%; position: fixed; top: 160px; height: 100%; margin-bottom: -40px;">
    <div style="width: 1024px; margin: 0 auto; background: #fff url('Images/body-bg.png') repeat-x fixed top left;
        height: 100%;">
        <div style="padding: 0 10px;">
<!--Main Content Section-->
        </div>
    </div>
</div>

<div style="width: 100%; height: 40px; background: #dddedf url('Images/footer-bg.png') repeat-x bottom left;
    position: fixed; bottom: 0;">
    <div style="width: 1024px; margin: 0 auto;">
        <div style="padding: 0 10px;">
               <!--Footer Section-->
        </div>
    </div>
</div>

我需要设置主要内容占位符的绝对位置,因为jquery滚动菜单。如果我设置了相对位置,那么在访问菜单时,主内容占位符内的文本将被包装。有关此问题的更多细节,请参阅本题。

这里是一个演示,这是相同的jsfiddle。我做错什么了吗?欢迎提出解决办法和建议。

提前致谢。


共1个答案

匿名用户

或许可以考虑使用Twitter的引导程序?这是伟大的响应设计,并固定元素到页面的顶部和底部。

http://twitter.github.com/bootstrap/