Question

开始怀疑我是否遗漏了一些显而易见的东西，但我现在一直在寻找几天，但仍然无法找到明确的答案。

我正在寻找的是具有标题和粘性页脚的两列页面（右侧菜单）的Source有序内容CSS布局，并且最好没有讨厌的黑客攻击。优先来源顺序：
{}内容
{} rightmenu
{}页脚
{header}

就像我说我试图为自己构建这个并没有太过分，我也没能在任何地方找到合适的例子。有什么建议吗？

由于

Answer 1

内容正确，左侧边栏可能是最容易浮动的布局，只需用宽度浮动内容，让左侧填充空格以避免包裹。页脚通过清除进入下方。

至于标题首先在源代码中放置一个假标题div，假设可能有标记或其他内容，即使你可能不想要大量的链接，如果有一个很大的下拉菜单去在那里或类似的东西。无论如何，我会把“假”标题高到足以创建你需要的空间，然后在其中放入任何实际内容，然后将你想要的内容放在顶部的div中，并且绝对定位它。

这是一个fiddled mockup

Answer 2

这是我现在能想到的最好的。相对和绝对定位的混合，但似乎工作。任何人都可以看到任何问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
    <head>
        <style>
            * {
    margin: 0;
    }
    html, body {
    height: 100%;
    }
    .container {
    min-height: 100%;
    /*height: auto !important;*/
    height: 100%;
    margin: 0 auto -2em;
    }
    .content{
    float: left;
    width: 80%;
    }
    .menu{
    margin-left: 80%;
    }
    .header{
    position: absolute;
    top: 0px;
    height: 3em;
    width: 100%;
    }
   .clearheader{
    height: 3em;
    }
   .footer, .clearfooter {
   height: 2em;
   clear: both;
   }

   .container {
    background: grey;
    }
   .header{
    background: cyan;
    }
    .clearheader{
    background: cyan;
    }
    .footer{
    background: blue;
    }
    .clearfooter {
    background: lightblue;
    }

        </style>
        <link rel="stylesheet" href="NJC layout2.css" ... />
    </head>
    <body>
        <div class="container">
            <div class="clearheader"></div>
            <div class="content">Content</div>
            <div class="menu">menu</div>
            <div class="clearfooter"></div>
        </div>
        <div class="header">header</div>
        <div class="footer">Footer</div>
    </body>
</html>

Answer 3

如果我理解你的问题，这应该是你的答案：

http://www.positioniseverything.net/ordered-floats.html

我实际上认为这篇文章很好地解释了一切。

具有源排序内容的CSS布局

3 个答案: