垂直三欄布局擁有相同高度的方法(轉)

我們都瞭解擁有相同高度的布局是很麻煩的事，有很多相關資料提到過相關設計方法，所以在這我就不多做解釋了。

最近在研究一個兩個欄目的動態布局，每個欄目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需要一個動態布局的方法。我又看了完美布局的文章One True Layout，但是有很多bug，需要許多注釋和程式。甚至考慮用JavaScrip來實現欄目始終保持同一高度，但是不行。絕望之餘，幾乎要用table布局，不，一定還有更好的方法。我想著一個問題“盒子外面是什麼”，border！如果我可以使“sidebar”（或"rail"）的div相對與“content”的div浮動，就可以實現多欄目相同高度。這個方法在很多地方介紹過：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法發展而來，用更簡潔清楚的代碼 實現了兩個欄目的動態變化。下面是代碼：

HTML:

<div id="container">

<div id="content">This is<br />some content</div>

<div id="rail">This is the rail</div>

</div>

CSS:

#container{

background-color:#0ff;

overflow:hidden;

width:750px;

}

#content{

background-color:#0ff;

width:600px;

border-right:150px solid #f00; »

/* The width and color of the rail */

margin-right:-150px; /* Hat tip to Ryan Brill */

float:left;

}

#rail{

background-color:#f00;

width:150px;

float:left;

}

給content div右加border，顏色寬度和rail一樣，並相對與rail浮動。Margin:-150px;使rail div移到margin騰出的空間。如果content div變的比rail div 高，border隨content div變高。視覺效果就是好像rail div也在變高。container的顏色設定和content div一樣，如果rail div達到最高，container隨之變高，這樣就給我們content變高的效果。

看看效果。See it in action 。試改變字型大小，布局隨之變化。

3個欄目：3個顏色

3個欄目的布局有點不同:直接給container div加border.

HTML:

<div id="container">

<div id="center">CENTER<br />COLUMN CENTER</div>

<div id="leftRail">LEFT RAIL</div>

<div id="rightRail">RIGHT RAIL</div>

</div>

CSS:

#container{

background-color:#0ff;

float:left;

width:500px;

border-left:150px solid #0f0; »

/* The width and color of the left rail */

border-right:200px solid #f00; »

/* The width and color of the right rail */

}

#leftRail{

float:left;

width:150px;

margin-left:-150px;

position:relative;

}

#center{

float:left;

width:500px;

margin-right:-500px;

}

#rightRail{

float:right;

width:200px;

margin-right:-200px;

position:relative;

}

中間的欄目margin-right:-150px 使左邊的rail div始終沿中間欄目的左沿浮動，使旁側邊欄目在真確的位置顯示。還有一些方法可以實現，但這個方法最好，更易實現流動布局（動態布局）。

因為側邊欄在container div外，浮動在border上。使用overflow: hidden使之隱藏：IE不支援，Firefox可以實現。側邊欄不需要設定顏色，它會於container div的顏色保持一致。

流動布局

瞭解定寬布局之後，我嘗試把這個方法用到動態布局中去。側邊欄仍然需要設定固定寬，很多瀏覽器不支援border:**%的屬性。但是我門可以使中間欄目自適應。

CSS:

#container{

background-color:#0ff;

overflow:hidden;

margin:0 100px;

padding-right:150px; /* The width of the rail */

}

* html #container{

height:1%; /* So IE plays nice */

}

#content{

background-color:#0ff;

width:100%;

border-right:150px solid #f00;

margin-right:-150px;

float:left;

}

#rail{

background-color:#f00;

width:150px;

float:left;

margin-right:-150px;

}

3個欄目調適型配置

方法簡單，不需要引用圖片，沒有BUG.

HTML:

<div id="container">

<div id="center">Center Column Content</div>

<div id="leftRail">Left<br /> Sidebar</div>

<div id="rightRail">Right Sidebar</div>

</div>

CSS:

body{

margin:0 100px;

padding:0 200px 0 150px;

}

#container{

background-color:#0ff;

float:left;

width:100%;

border-left:150px solid #0f0;

border-right:200px solid #f00;

margin-left:-150px;

margin-right:-200px;

display:inline; /* So IE plays nice */

}

#leftRail{

float:left;

width:150px;

margin-left:-150px;

position:relative;

}

#center{

float:left;

width:100%;

margin-right:-100%;

}

#rightRail{

float:right;

width:200px;

margin-right:-200px;

position:relative;

}