甚至兩列的佈局，其中一列有一個頁眉和粘腳

如何創建一個看起來像這樣的佈局？（我願意用表！）甚至兩列的佈局，其中一列有一個頁眉和粘腳

http://f.cl.ly/items/393H2F120L2r3P0E0l1w/Screen%20shot%202011-06-04%20at%2011.10.32%20AM.png

我用表，以確保西1和Col 2甚至，但現在我無法弄清楚如何頁眉/頁腳添加到山口2 <td>

2011-06-04 Tom Lehman

@matterwjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – Jawad 2011-06-04 20:09:18

@Jawad - 是否有任何理由更喜歡黑客基於表的黑客？我發現表格比較容易理解（儘管仍然不是最佳的） – 2011-06-05 02:24:37

我更喜歡基於表格的佈局。唯一違背它的是現代網絡發展中的「不」No。我發現下面的解決方案比上面的鏈接好得多。此外，還有其他解決方案，如Javascript和JQuery。然而，如果你希望在今天晚些時候從基於表格的佈局轉移到基於CSS的laouts。 http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/ | http://abcoder.com/css/css-equal-height-columns/ – Jawad 2011-06-05 16:14:40

純粹是因爲你已經清楚地表明你不介意using tables for layout，這裏是一個基於表的解決方案：

http://jsfiddle.net/mjQA3/

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="300" rowspan="3">Col 1</td> 
     <td height="30">Col 2 Header</td> 
    </tr> 
    <tr> 
     <td>Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br /></td> 
    </tr> 
    <tr> 
     <td height="30">Col 2 Footer</td> 
    </tr> 
</table>

來源

2011-06-04 18:33:08 thirtydot

我當然會更喜歡*不使用表格，但如果我需要一個CSS黑客任何一個，我不妨使用最簡單的破解（通常是一張表）。你會在這裏使用不同的方法嗎？ – 2011-06-04 19:39:02

不幸的是，當Col 1的內容比Col 2多得多時，這種解決方案在Chrome中無法使用：http://jsfiddle.net/mqNvX/（圖片：http：//cl.ly/040f22340H1M1z362c3q） – 2011-06-05 04:14:39

我看起來不像找到一種方法來解決這個問題。我想這就是爲什麼我傾向於在大多數時候使用基於CSS的解決方案:)基於CSS技術的問題是它們似乎都有（不同的）缺點。所以，有幾個問題：這是否應該填充視口（從不在頁面上的垂直滾動條），或者如果存在大量內容，是否應該存在垂直滾動條？必須支持哪些瀏覽器/版本？這件事會填滿視口的寬度，還是會固定寬度和居中？我希望這些問題有意義，如果不是，我會更好地解釋。 – thirtydot 2011-06-05 04:56:34

甚至兩列的佈局，其中一列有一個頁眉和粘腳

回答

相關問題