我有 3 列的布局。我需要将左右 div 的宽度固定为像素,中间 div 应该根据浏览器宽度进行扩展。
参考图像
灰色和红色 div 的宽度以像素为单位固定,因此这两个应该始终位于浏览器的左右两侧,绿色 div 不应该有任何宽度,因为它应该根据浏览器宽度扩展。
这是我到目前为止尝试过的演示http://jsfiddle.net/JvHZ7/
我有 3 列的布局。我需要将左右 div 的宽度固定为像素,中间 div 应该根据浏览器宽度进行扩展。
参考图像
灰色和红色 div 的宽度以像素为单位固定,因此这两个应该始终位于浏览器的左右两侧,绿色 div 不应该有任何宽度,因为它应该根据浏览器宽度扩展。
这是我到目前为止尝试过的演示http://jsfiddle.net/JvHZ7/
试试这个jquery,
var left = $(".left").width();
var right = $(".right").width();
var main = $(".wrapper").width();
var setwidth = main - right - left;
$('.center').css("width", setwidth);
这里的演示:小提琴
我希望这对你有帮助。
你可以检查这个: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。
您可以使用 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*/
}
显示:表格;在 IE 7 中不兼容;
如果要使用 jquery,请执行以下操作。
var thisWidth = ($(window).width()) - 220 - 140;
$('.center').css("width", thisWidth);
还要注意 height:100%; 无法用周围的 div 来固定高度。