用css3的分栏属性好做，可惜所谓的更标准几个浏览器FF、OP、CF、SF对这个属性目前还支持得不太一样，兼容性差。
不用css3很烦人的就是黄色那个div和绿色的div上下距离必须要用js实时计算出来。
ie6-8没测试，我认为没这个必要，这个界面理论上的最终用户应该都是手机、平板，这些设备上不存在ie6-8的问题。
如果你在浏览器下看，拉动窗口大小时，黄、绿div之间的上下边距是不变的，要刷新才会跟着窗口宽度而相应的变大或小，就是说手机用户进去了再旋转屏幕方向的话，那个距离的值就会出错，需要刷新一下才会重新计算出正确的值。我再不去睡觉明天爬不起来了，所以没给你写这段重新计算值的js，你可以自己改些代码上去一直监听浏览器尺寸变化，一旦变化了就重算出这个值赋值给那个div。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Test WinPhone Style</title>
<meta name="viewport" content="width=max-device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div id="wrapper">
<div id="a">1</div>
<div id="b-c">
<div id="b">2</div>
<div id="c">3</div>
</div>
<div id="d">4</div>
<div id="e">5</div>
</div>
</body>
</html>
<style>
html, body, div, span, object, iframe,
a, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, abbr, address, cite,
code, del, dfn, em, img, ins, kbd, q,
samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, figcaption,
tbody, tfoot, thead, tr, th, td, article,
aside, figure, footer, header, hgroup,
menu, nav, section, time, mark, audio,
video, details, summary,dialog {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.c{outline:red dotted 1px;}
#wrapper {
width: 96%;
margin: 0 auto;
padding: 2%;
text-align: left;
}
#a{
width: 100%;
height: 110px;
background: #FF5353;
margin: 0 0 2% 0;
}
#b-c{
width: 49%;
margin: 0 2% 2% 0;
float: left;
background: #94C62F;
}
#b{
width: 100%;
height: 160px;
background: #FAB414;
border-bottom: 1px #fff solid;
}
#c{
width: 100%;
height: 80px;
background: #94C62F;
}
#d{
width: 49%;
height: auto;
background: #17C38B;
float: right;
margin-bottom: -2%;
}
#e{
width: 100%;
height: 110px;
background: #1C98EE;
clear: both;
}
</style>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(SameH("b-c","d"));
addLoadEvent(autoBR);
//让#b-c和#d的高度一样
function SameH(leftDiv,rightDiv) {
var a = document.getElementById(leftDiv);
var b = document.getElementById(rightDiv);
if(a.scrollHeight < b.scrollHeight){a.style.height=b.scrollHeight+"px";}
else{b.style.height=a.scrollHeight+"px";}
}
//根据页面宽度计算出#b的边框值
function autoBR() {
var autoBR = document.getElementById("b");
var W = document.getElementById("a").offsetLeft;//document.getElementById(wp).offsetWidth-b.offsetWidth*2;
alert (autoBR.offsetHeight- W);
autoBR.style.borderBottomWidth = W + "px";
autoBR.style.height = autoBR.scrollHeight - W + 1 + "px";
}
</script>
就是要代码的亲
