css - そのような動的CSSレイアウトを取得する方法:

Question

CSS とレイアウトは初めてで、1 つのレイアウトに問題があります

JS でアプリを開発しようとしていますが、このレイアウトを純粋な css で作成したいと考えています。出来ますか？

ここにフィドルがあります： http://jsfiddle.net/vxeqL/

#left は 100% の高さで、 #left-top は一定の高さ: 200px;

私のコードコファー（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;
}