固定页脚与 100 高度绝对位置正文和 jquery 滚动菜单答案

【问题标题】：Fixed footer with 100 height absolute position body and jquery scroll menu固定页脚与 100 高度绝对位置正文和 jquery 滚动菜单
【发布时间】：2012-10-20 14:41:53
【问题描述】：

我正在创建一个具有 1024 宽度框架的新网站。我需要 100% 宽度的顶部页眉、页眉、菜单和 100% 宽度的页脚。但我需要 1024 像素宽度的内容占位符。我正在尝试设置 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 滚动菜单，我需要设置主要内容占位符的绝对位置。如果我设置相对位置，则主要内容占位符内的文本在访问菜单时会被换行。有关此问题的更多详细信息，请参阅此question。

这是demo，这是相同的jsfiddle。我做错什么了吗？欢迎提供解决方案和建议。

提前致谢。

【问题讨论】：

标签： html css

【解决方案1】：

也许考虑使用 Twitter 的引导程序？它非常适合响应式设计以及将元素固定到页面顶部和底部。

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

【讨论】：

谢谢@Ollie。但我真的不想使用引导程序。因为我的框架（一个 asp.net Web 应用程序）需要 1024px 的最大宽度，而他们（客户）不想要 940px 或 1200px 的框架。所以，我很难得到我想要的和客户需要的。我也试过这个link。我在css中做错了吗？再次感谢。
您可以修改引导程序以仅使用您需要的宽度。查看文档中的脚手架页面并将页面设置为不再响应。但是，您应该能够为具有这些不同尺寸选项的响应式设计提出理由，因为它允许网站在更广泛的屏幕尺寸选择上看起来很棒。
好的。谢谢。将尝试使用引导程序...希望一切都会好起来。 :) 完成后我会发布我的解决方案。