CSS 圣杯布局答案

【问题标题】：CSS Holy Grail layoutCSS 圣杯布局
【发布时间】：2013-06-04 01:30:03
【问题描述】：

有人可以帮我分解一下组成圣杯布局的部分吗？ http://matthewjamestaylor.com/blog/perfect-3-column.htm

我的理解是：

colmask 只是一个包装器，用于定位页眉和页脚之间的内容
colmid 是另一个包装器，我猜它可以容纳一些浏览器，例如 IE7
colleft 是真实事物的包装器（不知道为什么有这么多包装器）
col1、col2 和 col3 是真实的，都向左浮动并设置它们的边距以调整它们在屏幕上的外观

谁能更好地解释一下这种设计的禅意是什么？我正在尝试将它应用到现实世界的场景中，但它并没有真正起作用。

【问题讨论】：

你读过：alistapart.com/articles/holygrail?
那个人正在使用一种不同的技术，但我会继续思考它，看看我是否可以更好地理解我所指的另一个圣杯

标签： css

【解决方案1】：

在对所有建议感到沮丧后，我想出了这个布局。它的 HTML5/CSS3 兼容并在 IE8+ 和至少 FF21 中工作——我没有在其他版本和浏览器中测试过。但是，如果您正在寻找流畅的布局 - 这个效果很好。

<!DOCTYPE html>
<html>

 <head>
  <title>Canvas</title>
  <style type="text/css">

   * {padding:0px; margin:0px;}
   html, body {width:100%; height:100%;}

   #page {width:100%; height:100%;position:relative;}

     #page > #header {
         position:absolute;
         top:0px;
         left:0px;
         right:0px;
         height:64px;

         background:#ccc;
         }

     #page > #body {
         position:absolute;
         top:64px;
         left:0px;
         right:0px;
         bottom:64px;    
         }

       #page > #body > #left {
           position:absolute;
           top:0px;
           left:0px;
           bottom:0px;
           width:192px;  

           background:#bbb;
           }

       #page > #body > #center {
           position:absolute;
           top:0px;
           left:192px;
           right:192px;
           bottom:0px; 
           }

       #page > #body > #right {
           position:absolute;
           top:0px;
           right:0px;
           bottom:0px;
           width:192px; 
           background:#bbb; 
           }

     #page > #footer {
         position:absolute;
         bottom:0px;
         right:0px;
         left:0px;
         height:64px;
         background:#ccc;
         }

  </style>
 </head>

 <body>
   <div id="page">
     <div id="header"></div>
       <div id="body">
         <div id="left"></div>
         <div id="center"></div>
         <div id="right"></div>
       </div>
     <div id="footer"></div>
   </div>
 </body>

</html>

【讨论】：

【解决方案2】：

圣杯是一种 3 列的液体布局，其中无论内容有多少，三列的长度都相同。这些列在 html 中应按 2-3-1 顺序排列（用于 SEO）。这个想法是将内容与背景颜色分开并将其放入不同的div中。浮动容器 div 将始终是其浮动内容的高度，所以这里发生的事情是对于每个内容 div，都有一个匹配的相对定位的浮动容器 div。这是三个包装器。

一步一步，它的工作原理是这样的：

设置三个嵌套在三个嵌套包装器中的列。

<div id="container-right">
  <div id="container-middle">
    <div id="container-left">
      <div id="col1">Column 1</div>
      <div id="col2">Column 2</div>
      <div id="col3">Column 3</div>
   </div>
 </div>

将它们全部浮动并设置它们的背景颜色（记住 col1 是中心！）
将包装宽度设置为 100%。将 col 宽度设置为总计 100%（40%、30%、30%）。使它们的定位相对于两种类型。
现在所有的彩色 div 都在彼此的顶部。通过设置 right 属性将列颜色包装器 div 滑过。不理会 container-right。将容器中间移动 30% 以上，露出下面的颜色。将 container-left 移到 more 以显示两者。
现在内容位于视口的左侧。使用相同的技术将每个 div 推入到位，但这次使用 left 属性。
最后，通过在最外层的包装上设置溢出：隐藏来切断多余的部分。请注意，您必须在外部 div 上将定位设置为相对，否则此步骤在 IE 中不起作用。

【讨论】：