我正在尝试创建一种安排,其中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;
}
詹姆斯
答案 0 :(得分:1)
将width:calc(50% - 150px);
添加到#leftbox
和#rightbox
(150px =中心框宽度的一半)
浏览器支持:http://caniuse.com/calc
答案 1 :(得分:1)
不确定这是否只能使用CSS实现,但这里有一个方便的JavaScript代码片段,可以帮助您更有效地管理固定和基于百分比的页面宽度:
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()">
从这里开始,因为您有一个计算的页面宽度,您可以相应地调整您的个人div
的大小:
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。
答案 2 :(得分:1)
只需使用固定宽度的浮动
#fixed{float:left;width:360px;background-color:green;height:100%;color:yellow;}
#elastic{background-color:#ddd;height:100%;color:grey;}