设置边缘 div 来填充剩余宽度

Question

我发现了几个已经被问过的类似场景，但没有一个能够解决这个特定问题。我希望有人能帮忙！

连续三个div。中间的 div 居中，并且具有设定的宽度和宽度。高度。外部两个 div 必须扩展以填充窗口边缘和中心 div 边缘之间的剩余空间。像这样：

http://kthornbloom.com/example.jpg

*注意-我想用CSS解决它，但如果需要javascript，那就可以了

*note2-这样做的目的不是使中间的div居中，我知道有更好的方法可以做到这一点。目的是为了设计使用背景元素的网站，该背景元素需要是页面除中间之外的整个宽度。

Answer 1

请参阅：http://jsfiddle.net/thirtydot/xhCXq/

HTML：

<div id="container">
    <div id="left"> </div>
    <div id="mid">mid</div>
    <div id="right"> </div>
</div>

CSS ：

#container {
    width: 100%;
    height: 200px;
    display: table
}
#left, #mid, #right {
    display: table-cell;
    background: #ccc;
    outline: 2px dashed blue
}
#mid {
    width: 400px;
    background: #f0f
}

我认为这很好地回答了你的问题，但这让我担心：

这样做的目的不是为了居中
中间的div，我知道有更好的
这样做的方法。目的是为了
网站的设计使用了
需要的背景元素
页面的整个宽度，除了
中间。

您确定您确实需要这样复杂的解决方案吗？也许更简单的东西：
http://jsfiddle.net/thirtydot/xhCXq/1/

Answer 2

CSS不是动态语言，你不能用它来计算剩余空间。您可以使用 jQuery 来实现这一点。在下面的示例中，中间 div 将保持 400 像素，而剩余空间将在左右 div 之间分配。

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

检查工作示例 http://jsfiddle.net/M5Ghx/3/

Answer 3

不确定这是否有帮助，但我发现了这个有趣的技巧。似乎适用于 IE 8、IE 9、FireFox 3.6、FireFox 4 和 Safari 5（至少对于 Windows）。

<div name="test1" id="test1" style="position:absolute; left:0px; top:95px; width:50%; height:300px; z-index:5; background: #7BCDC9;">
This starts at the left edge, and goes all the way to the middle of the screen.
</div>
<div name="test2" id="test2" style="position:absolute; left:50%; top:95px; width:50%; height:300px; z-index:5; background: #4D3627;">
Starts in the middle, and goes all the way to the right edge.
</div>

然后，使用 z-index:10 将居中的 div 添加到顶部（使用您最喜欢的方法）；使其“位于”其他元素之上。