灵活的布局以适应浏览器宽度答案

【问题标题】：flexible layout to fit the browser width灵活的布局以适应浏览器宽度
【发布时间】：2012-09-27 21:23:06
【问题描述】：

我有 3 列的布局。我需要将左右 div 的宽度固定为像素，中间 div 应该根据浏览器宽度进行扩展。

参考图片

灰色和红色 div 的宽度以像素为单位固定，因此这两个应该始终位于浏览器的左右两侧，而绿色 div 不应该有任何宽度，因为它应该根据浏览器宽度进行扩展。

这是我目前尝试的演示http://jsfiddle.net/JvHZ7/

【问题讨论】：

标签： css layout html

【解决方案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*/
}

【讨论】：

@Sowmya 你在.right CSS 中有float: right;。这是一个固定版本：little link.
在本例中，中心 div 处于关闭状态
@Sowmya 你有更多的floats，这是一个固定版本：little link。
这是一个使用内部 div 的边距版本（边距在该方法中不起作用）和左侧的两个固定 div：jsfiddle.net/stadolf/9VMmC

【解决方案2】：

试试这个jquery，

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

这里是演示：fiddle

希望对你有帮助。

【讨论】：

【解决方案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;
}

此方法是跨浏览器，不需要任何 hack，也不需要 JavaScript。

【讨论】：

这应该在顶部，因为它是跨浏览器解决方案。

【解决方案4】：

显示：表格；在 IE 7 中不兼容；

如果要使用 jquery，请执行以下操作。

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

还要注意 height:100%;无法用周围的 div 来固定高度。

【讨论】：