三列流体布局答案

【问题标题】：three columns fluid layout三列流体布局
【发布时间】：2010-11-11 12:23:49
【问题描述】：

您可以复制粘贴以下标记和css来查看效果。

问题存在于“页脚”部分。

现在“column1”和“column3”是绝对定位的。

只有在“column2”最高时才有效。

如何让“页脚”在所有情况下都不与column1~column3交错？

标记：

<body>
<div id="mainwrap">
<div id="header"><p>A fluid-width faux-columns example</p></div>
<div id="contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">

<div id="column2">
<p>This layout uses absolute/relative positioning to position the side columns within
 their respective faux columns containers.</p>
<p>You can control the maximum and minimum widths of the fluid center area.
Once the layout reaches its maximum width, it centers itself in the browser as the window
 gets wider.</p>
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis
    fermentum purus.</p>
   <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales,
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna.
    Nunc mattis congue leo.</p>
</div><!--end column2-->
<div id="column1">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!--end column1-->
<div id="column3">
<p>This template uses the Alsett clearing method.</p>
</div><!--end column3-->
</div><!--end contentarea2-->
</div><!--end contentarea-->
<div id="footer">This is the footer</div>
</div><!--end mainwrap-->
</body>

css:

body {font: 1.0em verdana, arial, sans-serif;
   text-align:center;
   }
* {margin:0; padding:0;}
div#mainwrap {min-width:780px; max-width:960px;
   margin-left:auto; margin-right:auto;
   text-align:left;
   }
div#header {height:32px; background-color:#CAF; text-align:center;}
div#contentarea { background-color:#FFF;
   background:url(images_pres/faux_left.gif) repeat-y top left;
   position:relative;
   }
div#contentarea2 {background-color:#FFF;
   background:url(images_pres/faux_right.gif) repeat-y top right;
   position:relative;
   }
div#column1 {width:150px;
   position: absolute;
   top:0px; left:0px;
   background-color:#CCC;
   overflow:hidden;
   }

div#column2 {background-color:#FFF;
   margin:0 170px 0 150px;
   }
div#column3 {width:170px;
   position:absolute;
   top:0px; right:0px;
   background-color:#DDD;
   overflow:hidden;
   }
div#footer {background-color:#FAC; text-align:center; padding-top:6px;}

div#column1 ul {margin: 20px 0 0 26px;}
div#column2 p {font-size:.8em; margin:0 30px 1em ;}
div#column3 p {margin: 20px 10px 0 10px;}

【问题讨论】：

标签： css fluid-layout

【解决方案1】：

你不能只使用 CSS。当您以这种方式放置列时，它们不再是文档流的一部分。甚至不清楚：两者都会有任何影响。

如果您知道侧列的高度，您可以给您的中心列指定一个最小高度，或者您可以使用 javascript 来计算最大高度。或者您可以浮动侧列，但这将规定 html 中块的特定顺序。

【讨论】：

【解决方案2】：

简单的方法是在所有三个中心 div 上做一个 float:left，然后使用

<div style="clear:both;">&nbsp;</div>

网络上有几十个例子，960 Grid System 是一个很好的框架来处理这样的事情。

您应该尽可能避免绝对定位。

【讨论】：

Column1 和 Colum3 是固定宽度的，而 column2 是灵活的。可以使用浮动来实现吗？
alistapart.com/articles/holygrail 有一个关于如何实现这一目标的精彩教程。

【解决方案3】：

你也可以考虑Fluid 960 Framework

【讨论】：

【解决方案4】：

将您的代码替换为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="Styles/Copy%20of%20Site.css" rel="stylesheet" type="text/css" />
<body style="height:335px;">
<div id="mainwrap">
<div id="header"><p>A fluid-width faux-columns example</p></div>
<div id="contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">

<div id="column2">
<p>This layout uses absolute/relative positioning to position the side columns within
 their respective faux columns containers.</p>
<p>You can control the maximum and minimum widths of the fluid center area.
Once the layout reaches its maximum width, it centers itself in the browser as the window
 gets wider.</p>
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis
    fermentum purus.</p>
   <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales,
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna.
    Nunc mattis congue leo.</p>
</div><!--end column2-->
<div id="column1">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!--end column1-->
<div id="column3">
<p>This template uses the Alsett clearing method.</p>
</div><!--end column3-->
</div><!--end contentarea2-->
</div><!--end contentarea-->

</div><!--end mainwrap-->
<div id="footer" style="vertical-align:bottom;margin-top:100px;">This is the footer</div>
</body>

【讨论】：