<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header {
background-color: gray;
position: absolute;
top: 0;
bottom: 50%;
left: 0;
right: 0;
}
.main .left,
.main .right {
background: #a23;
position: absolute;
bottom: 0;
left: 0;
top: 50%;
right: 0;
}
.main .left {
right: 50%;
}
.main .right {
background: #e11;
left: 50%;
}
</style>
</head>
<body>
<div class="header">头</div>
<div class="main">
<div class="left">左</div>
<div class="right">右</div>
<div class="clear"></div>
</div>
</body>
</html>
