三柱流體佈局

您可以複製&粘貼下面的標記和CSS來查看效果。三柱流體佈局

問題存在於「頁腳」部分。

現在「column1」和「column3」被絕對定位。

它只有在「column2」最高時纔有效。

如何在所有條件下使「頁腳」不與列1〜列3交錯？

標記：

<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;}

來源

2009-07-16 omg

這屬於上doctype.com – CarlG 2009-10-22 03:28:06

你在短短的CSS不容。以這種方式定位列時，它們不再是文檔流程的一部分。甚至不清楚：兩者都會有影響。

如果您知道側欄的高度，或者您可以使用javascript來計算最大高度，則可以給中間欄設置最小高度。或者你可以浮動邊欄，但這將決定HTML中塊的某個順序。

來源

2009-07-16 20:23:35 jeroen

簡單的方法是做一個float：留在這三個中心的div，然後用

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

有幾十個例子在網絡上看到960 Grid System是這樣的一個偉大的框架。

如果可能，應避免絕對定位。

來源

2009-07-16 21:20:08 Davin

列1和Colum3固定寬度，而列2是靈活的。可以實現那個使用float？ – omg 2009-07-16 21:30:26

您也可以考慮Fluid 960 Framework

來源

2009-07-17 19:44:34 pegasus4747

替換爲您的代碼：

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

來源

2013-02-02 10:54:59

三柱流體佈局

回答

相關問題