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

时间:2012-09-27 12:35:10

标签: css layout html

我有3列的布局。我需要将left和right divs宽度固定在像素中,而中间div应该根据浏览器宽度进行扩展。

参考图片

enter image description here

灰色和红色divs宽度以像素为单位固定,因此这两个应该始终向右和向左移动到浏览器,绿色div不应该有任何宽度,因为它应该根据浏览器宽度进行扩展。

以下是我到目前为止尝试的演示http://jsfiddle.net/JvHZ7/

4 个答案:

答案 0 :(得分: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*/
}

答案 1 :(得分:1)

试试这个jquery,

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

这里的演示:fiddle

我希望这对你有帮助。

答案 2 :(得分:1)

您可以查看: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。

答案 3 :(得分:0)

显示:表;在IE 7中不兼容;

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

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

还要注意身高:100%;无法用周围的div来修复高度。