固定宽度的中间 div 和两侧的两个弹性宽度 div答案

【问题标题】：Fixed-width middle div and two elastic-width divs either side of it固定宽度的中间 div 和两侧的两个弹性宽度 div
【发布时间】：2013-11-25 01:59:05
【问题描述】：

我正在尝试创建一个排列，其中一个 div 中有三个 div 填充页面的 100% 宽度。中间 div 将具有固定宽度，两个外部 div 将占据剩余空间的 50%。这可以使用 CSS 实现吗？

我已经设置了一个小提琴，它不起作用，http://jsfiddle.net/6y5hn/ 我尝试实现这一点，使用以下代码：

<div id="outerbox">
    <div id="leftbox">(elastic width) This should occupy all the space in the grey box to the left of the red box</div>
    <div id="centerbox">(fixed-size) should be in the center of the grey box</div>
    <div id="rightbox">(elastic width) This should occupy all the space in the grey box to the right of the red box</div>
</div>

使用 CSS：

#outerbox {
    background-color:gray;
    margin-top:50px;
    width:100%;
    height:200px;
}

#centerbox {
    background-color:red;
    margin-left:auto;
    margin-right:auto;
    float:left;
    height:100px;
    width:300px;
}

#leftbox {
    background-color:yellow;
    height:300px;
    float:left;
}

#rightbox {
    background-color:pink;
    height:300px;
    float:left;
}

詹姆斯

【问题讨论】：

标签： css html layout elasticlayout

【解决方案1】：

将width:calc(50% - 150px); 添加到#leftbox 和#rightbox（150px = 中心框宽度的一半）

http://jsfiddle.net/6y5hn/2/

浏览器支持：http://caniuse.com/calc

【讨论】：

哪些浏览器支持该功能？上帝，这是一个如此美妙的结构，谢谢！

【解决方案2】：

不确定这是否可以仅使用 CSS 来实现，但这里有一个方便的 JavaScript 代码 sn-p 可以帮助您更有效地管理固定和基于百分比的页面宽度：

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

}

然后您可以在页面加载以及页面调整大小时调用resize() 函数。所以像：

<body onload="resize()">

从这里开始，因为您已经计算出页面宽度，您可以相应地调整您的个人divs 的大小：

document.getElementById("leftbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("rightbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("centerbox").style.width = 300 + "px";

centerbox 保持固定的 300 像素，而leftbox 和 rightbox 的宽度等于屏幕宽度减去 300 像素除以 2。

【讨论】：

【解决方案3】：

只需使用固定宽度的浮动

#fixed{float:left;width:360px;background-color:green;height:100%;color:yellow;}

#elastic{background-color:#ddd;height:100%;color:grey;}

http://jsfiddle.net/am46bm43/

【讨论】：