具有源排序内容的 CSS 布局答案

【问题标题】：CSS layout with Source ordered Content具有源排序内容的 CSS 布局
【发布时间】：2011-03-23 20:02:15
【问题描述】：

开始怀疑我是否遗漏了一些明显的东西，但我已经搜索了好几天，仍然无法找到明确的答案。

我正在寻找的是具有页眉和粘性页脚的两列页面（右侧菜单）的源排序内容 CSS 布局，最好没有讨厌的 hack。首选来源顺序：
{内容}
{rightmenu}
{页脚}
{标题}

就像我说的那样，我在尝试为自己构建这个方面并没有走得太远，我也无法在任何地方找到合适的示例。有什么建议吗？

谢谢

【问题讨论】：

为什么要将标头放在源代码的最后？请不要说 SEO。
尽管我觉得这很没有意义：如果你画一张显示不同元素应该去哪里的图片，我会创建一个看起来相同的布局。
虽然我不认为将网站徽标或 h1 放在底部是一个好主意，但我认为将一些标题放在底部可能是有正当理由的，例如，一个大的下拉列表是通常在底部对用户的可用性更好，而不仅仅是 SE ;)

标签： css

【解决方案1】：

内容向右，侧边栏向左可能是最简单的浮动布局，只需将内容向右浮动一个宽度，让左侧用溢出填充空间以避免换行。页脚通过清除进入下方。

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

这是fiddled mockup

【讨论】：

谢谢。现在已经有了一个工作原型。将其作为单独的答案发布，因为我看不到如何将其添加到此。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

其实我觉得这篇文章很好的解释了一切。

【讨论】：

感谢丹尼斯，有趣的文章。这回答了左/右列，尽管我已经用 float: left; /浮动：对；困难的一点似乎是让源有序的标头正确浮动在顶部
我实际上认为 clear-attribute 从这个角度来看非常有趣。查看 float-attribute 也很有趣。您应该尝试让多个元素向右浮动 - 并不总是合乎逻辑的！ ;) 但是让两个元素向左浮动和向右浮动可能是正确的方法。否则，您可以拥有一个宽度为 100% 的容器，并让该 div “包含”三列并使其向左浮动。然后使您的页脚宽度相同并向左浮动。
如果您有任何问题，请告诉我:-)