靈活的佈局，以適應瀏覽器寬度

Question

我有3列的佈局。我需要左右div寬度在像素中固定，中間div應根據瀏覽器寬度進行擴展。

參考圖像

灰色和紅色div的寬度是固定的像素，這樣這兩個應該是始終左右到瀏覽器和綠色DIV不應該有任何的寬度，因爲它應該擴展基於瀏覽器寬度。

這裏是我試過至今http://jsfiddle.net/JvHZ7/

Answer 1

您可以使用CSS表格演示。這裏有一個演示：little link。基本輪廓是這樣的，HTML：

<div class = "container"> 
    <div class = "fixed"> 
     I'm 150px wide! Glee is awesome! 
    </div> 
    <div class = "fluid"> 
     I'm fluid! Glee is awesome! 
    </div> 
    <div class = "fixed">   
     I'm 150px wide! Glee is awesome! 
    </div> 
</div> 

CSS：

html, body { 
    height: 100%; 
} 
.container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container > div { 
    display: table-cell; 
} 
.fixed { 
    width: 150px; /*or whatever you want*/ 
} 
.fluid { 
    /*yep, nothing*/ 
} 

Answer 2

顯示：表;在IE 7中不兼容;

如果您想使用jquery，請執行以下操作。

var thisWidth = ($(window).width()) - 220 - 140; 
$('.center').css("width", thisWidth);​ 

還注意到身高：100％;將無法與周圍的div一起修復高度。

Answer 3

試試這個jQuery，

var left = $(".left").width(); 
var right = $(".right").width(); 
var main = $(".wrapper").width(); 
var setwidth = main - right - left; 
$('.center').css("width", setwidth); 

這裏演示：fiddle

我希望這可以幫助你。

Answer 4

您可以檢查此：http://jsfiddle.net/SHnc9/1/

這種技術被稱爲陰柱，它的，如果你需要支持IE7及以下使用。

考慮這個HTML：

<div class = "container"> 
    <div class = "fixed first"> 
     I'm the first fixed 
    </div> 
    <div class = "fluid"> 
     I'm fluid! 
    </div> 
    <div class = "fixed last">   
     I'm the last fixed 
    </div> 
</div> 
​ 

和CSS

html, body { 
    height: 100%; 
    font-family: 'Arial', 'Helvetica', Sans-Serif; 
} 
.container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container > div { 
    text-align: center; 
    float:left; 
} 
.fixed { 
    background: rgb(34, 177, 77); 
    color: white; 
    width:150px; 
    position:relative; 
} 
.fluid { 
    background: rgb(0, 162, 232); 
    float:left; 
    width:100%; 
    margin-left:-150px; 
    margin-right:-150px; 
} 
​ 

這種方法是跨瀏覽器，不需要任何黑客和不需要的JavaScript。