Css框佈局主要內容在100％

您將如何使main_content延伸到頁眉，頁腳，右側和左側欄。只需查找帶有頁眉和頁腳的3列布局。我一直在尋找，並沒有找到任何這樣做的例子。Css框佈局主要內容在100％

<style type="text/css"> 
#header 
{ 
    height:100px; 
    border: 1px solid blue; 
} 
#left_side_bar 
{ 
    border: 1px solid blue; 
    width: 100px; 
    float: left; 
    height: 300px; 
} 
#main_content 
{ 
    border: 1px solid green; 
    float: left; 
    width: ?; 
    height: ?; 

} 
#right_side_bar 
{ 
    border: 1px solid blue; 
    width:100px; 
    height: 300px; 
    float: right; 
} 
#footer 
{ 
    border: 1px solid blue; 
    clear:both; 
    height: 100px; 
} 

</style> 

<div id="header"></div> 
<div id="left_side_bar"></div> 
<div id="main_content"></div> 
<div id="right_side_bar"></div> 
<div id="footer"></div>

來源

2011-08-15 TroyS

這需要使用哪個瀏覽器？ – andyb

ie，firefox，safari – TroyS

對不起，我應該已經更清楚了，哪個版本的IE至少需要這樣工作？是否需要IE6支持？ – andyb

嗯，這裏是a demo與position:fixed，雖然有很多網站可以爲您生成標記和CSS。例如非常好CSS Layout Generator

來源

2011-08-15 14:18:40 andyb

您提供的鏈接非常有用謝謝。 – TroyS

CSS

#Header { 
float: left; 
clear: both; 
width: 100%; 
} 

#Left_Side_Bar { 
float: left; 
width: 10%; 
} 

#Main_Content { 
float: left; 
width: 80%; 
} 

#Right_Side_Bar { 
float: left; 
width: 10%; 
} 

#Footer { 
float: left; 
clear: both; 
width: 100%; 
}

來源

2011-08-15 14:02:14 Snps

這實際上沒有工作鏈接 - > [css_test]（http://i1114.photobucket.com/albums/k535/tzat6/boxtext.png） – TroyS

在您的編輯中，您將固定寬度添加到了側面酒吧和我的例子不適用於固定寬度。但由andyb和jasalguero給出的其他解決方案應該爲您提供一個工作設置:) – Snps

這裏你可以發現大部分3個佈局的（固定牀，流化牀，混合...） - >CSS Layouts

來源

2011-08-15 14:13:19 jasalguero

非常感謝您的信息 – TroyS

Css框佈局主要內容在100％

回答

相關問題