Question

您可以复制并粘贴以下标记和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;}

Answer 1

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

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

Answer 2

简单的方法是做一个浮动：留在所有三个中心div上，然后使用

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

网上有很多例子，960 Grid System是一个很好的框架。

尽可能避免绝对定位。

Answer 3

您还可以考虑Fluid 960 Framework

Answer 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>

三列流体布局

4 个答案: