2 列布局，带有粘性页眉和页脚答案

【问题标题】：2 column layout with sticky header and footer2 列布局，带有粘性页眉和页脚
【发布时间】：2013-01-25 09:26:07
【问题描述】：

我想创建这个http://www.quackit.com/html/templates/frames/frames_example_5.html 不使用框架。我希望能够在左侧菜单 div 上设置右边框，但在我找到的示例中，左侧菜单 div 没有从页眉延伸到页脚。其他示例使用重复的 .jpg 为左侧菜单 div 绘制右边框。这应该不是一件容易的事吗？请帮忙...

【问题讨论】：

你试过什么？

标签： html css

【解决方案1】：

你应该试试CSS layout generator。 http://csslayoutgenerator.com/

【讨论】：

Sowmya 这是一个很酷的工具。但是尝试创建一个 2 列页面，其中左侧（菜单）列从页眉延伸到页脚。这就是我想要达到的目标。该工具不会拉伸左列。无论如何，谢谢。

【解决方案2】：

你为什么使用框架？您还可以使用 css Float: right/left 和 div。

你也可以用 css 制作一个粘性页脚，类似这样：

CSS

.sticky_footer 
{
    width:                              760px;
    border-top:                         1px solid #BEC2C8;
    position:                           fixed;
    bottom:                             0px;
    right:                              0px;
    left:                               0px;
    padding:                            20px 0px 10px;
    background-color:                   whitesmoke;
    background-image:                   url('/img/bg_footer.png');
    background-repeat:                  repeat-x;
    background-position:                top;
}

页面（页脚）

<div id="footer">
    <div class="sticky_footer">
        <p class="text-info" style="color: #0088cc !important; text-align: center;">
            <small> copyright ...</small>
        </p>
    </div>
</div>

【讨论】：

Raymond 我根本不使用框架。你能把整个页面的 html 和 css 都包含进去吗？
嘿赛拉，目前我不能这样做，因为在我工作期间没有额外的时间。但是，如果您将使用 css 浮动元素对不同博客中的页面进行分类并与 html div 结合使用，您可以查看此链接。 sitemasters.be/tutorials/5/1/90/CSS/Div_element