设置边缘 div 以填充剩余宽度答案

【问题标题】：Set edge div's to fill remaining width设置边缘 div 以填充剩余宽度
【发布时间】：2011-07-27 04:58:53
【问题描述】：

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

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

http://kthornbloom.com/example.jpg

*note- 我想用 CSS 解决它，但如果需要 javascript，那也可以

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

【问题讨论】：

如果唯一的原因是要有一个跨越整个页面的背景，为什么不在 html 上设置 background-image 呢？ div1和3需要放什么具体的内容吗？
您需要 IE6 还是 IE7 支持？
@Effata- 这是因为我需要一个跨越整个宽度的背景图像，除了中间。此外，我将为右侧 div 的背景图像设置动画。（解释起来有点复杂）

标签： css layout html width fluid-layout

【解决方案1】：

见：http://jsfiddle.net/thirtydot/xhCXq/

HTML：

<div id="container">
    <div id="left">&nbsp;</div>
    <div id="mid">mid</div>
    <div id="right">&nbsp;</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，我知道有更好的这样做的方法。目的是为了网站的设计使用需要的背景元素页面的整个宽度，除了 in 中间。

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

【讨论】：

您提供的两个示例都不适用于 IE6 和 IE7。 jQuery 仍然是唯一的跨浏览器兼容方式。
@Hussein：你说得对，目前在 IE6/7 中不起作用。但是，他甚至可能不关心那些浏览器（尤其是在当今时代不太可能需要 IE6 支持）。如果他确实需要对这些浏览器的支持，我可以添加一些技巧来使其工作。在任何情况下，他都应该改用我的方法，因为它在禁用 JavaScript 时有效（这总是可取的），并且在调整大小时它看起来要好得多。调整大小时，JavaScript 技术总是会闪烁。
@Hussein：如果他决定坚持您的解决方案，请确保您考虑到不同浏览器之间的亚像素渲染差异（您遇到的舍入问题）。相关信息见：stackoverflow.com/questions/5115637/…我给了你+1 :)
@thirtydot：感谢您提供替代解决方案。我不太关心 IE6/7，但我确实讨厌使用仿表。我必须在左右 div 中添加一些图像，这会导致布局分崩离析。如果我能解决 1px 问题，我会对 @Hussein 的方法感到满意！
@KThornbloom：它来自<img> 元素。请参阅：jsfiddle.net/xhCXq/13 - 我已通过添加 vertical-align: top 修复它。

【解决方案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/查看工作示例

【讨论】：

这只是一个小错误，如果用户快速调整页面大小，rem 将是一个负数，因此 div 将无法正确调整大小。我将在修复程序中进行编辑。
这个不错！谢谢你。如果您可以称其为唯一的“错误”，那就是某些浏览器在尺寸为“.5”尺寸（PC上的chrome）时div之间有1px的间隙。我猜这是浏览器的限制，而不是您的代码的问题。我会再等一会，如果没有其他人有其他建议，请将此标记为答案。
是的，这是浏览器限制。您可以通过将所有 3 个 div 包装在另一个具有与中间 div 匹配的背景的 div 中来解决此问题。检查jsfiddle.net/M5Ghx/4
好的，经过大量测试，我想使用这种方法。有没有办法解决鲁珀特指出的问题？快速调整窗口大小使右侧 div 闪烁并上下跳跃。
我们无法控制 Flicker 来快速调整窗口大小。

【解决方案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 添加到顶部（使用您喜欢的方法）；使其“在”其他元素之上。

【讨论】：