如何获得动态CSS布局这样的：

Question

我是新来的CSS和布局，并与一个布局

我试图开发JS应用程序有问题，但我想有这种布局纯CSS 。可能吗？

这里是一个小提琴： http://jsfiddle.net/vxeqL/

我的主要问题是与蓝色的框，#left是100％的高度，和＃左上方有恒定的高度：200像素;

我的代码合作远（HTML）：

<div id="header"> 
</div> 

<div id="container"> 

<div id="left"> 

    <div id="left-top"></div> 
    <div id="left-bottom"></div> 
</div> 


<div id="right"> 
</div> 


</div> 

<div id="footer"> 
</div> 

和CSS

#header { 
    height: 60px; 
    width: 100%; 
} 

#container { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 60px; 
    bottom: 60px; 
    left:0; 
} 

div#left { 
width: 600px; 
float: left; 
height: 100%; 
} 

div#left-top { 
width: 100%; 
height: 200px; 
} 

div#left-bottom { 
#width: ?; 
#height: ?; 
} 

div#right { 
width:100%; 
height: 100%; 
margin-left:600px; 
} 

div#footer { 
position: absolute; 
width: 100%; 
height: 60px; 
bottom: 0; 
left: 0; 
} 

Answer 1

你为什么不只是使用绝对定位？ 检查了这一点： http://jsfiddle.net/hPpTV/

#header, #container, #left, #left-top, #left-bottom, #right, #footer { 
    position: absolute; 
} 
#header { 
    top:0; 
    height: 60px; 
    width: 100%; 
} 
#container { 
    width: 100%; 
    top: 60px; 
    bottom: 60px; 
} 
#left { 
    top: 0; 
    bottom:0; 
    width: 300px; 
} 
#left-top { 
    top:0; 
    left:0; 
    width: 100%; 
    height: 200px; 
} 
#left-bottom { 
    top: 200px; 
    bottom: 0; 
    width: 100%; 
    overflow:auto; 
} 
#right { 
    top:0; 
    left: 300px; 
    right: 0; 
    bottom: 0; 
    overflow:auto; 
} 
#footer { 
    width: 100%; 
    height: 60px; 
    bottom: 0; 
} 

Answer 2

#header { 
    height: 60px; 
    width: 100%; 
} 
#container { 
height:100%; 
} 
div#left { 
width: 600px; 
float: left; 
height: 100%; 
} 
div#left-top { 
width: 100%; 
height: 200px; 
} 
div#left-bottom { 
height:150px; 
width:100%; 
overflow-x:scroll; 
overflow-y:hidden; 
} 
div#left { 
width:40%; 
float:left; 
height: 100%; 
} 
div#right { 
width:60%; 
height: 100%; 
float:right; 
} 
div#footer { 
width: 100%; 
height: 60px; 
}