灵活的布局以适应浏览器的宽度(flexible layout to fit the browser

我有3列的布局。 我需要左，右div的宽度是固定的像素和中间DIV应该基于浏览器的宽度上延伸。

参考图像

灰色和红色div的宽度是固定的像素，这样这两个应该是始终左右到浏览器和绿色DIV不应该有任何的宽度，因为它应该扩展基于浏览器的宽度。

这里是我试过到目前为止演示http://jsfiddle.net/JvHZ7/

Answer 1:

您可以使用CSS表格。 这里有一个演示： 小链接 。 基本轮廓是这样的，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:

试试这个jQuery的，

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

这里演示： 小提琴

我但愿这对您有所帮助。

Answer 3:

您可以检查此： 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。

Answer 4:

显示：表; 是不是在IE 7兼容;

如果你想使用jquery，做到以下几点。

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

还指出，高度：100％; 将无法正常工作与周围的div固定的高度。

文章来源: flexible layout to fit the browser width