HTML/CSS什么是最佳的获得以下布局建设

Question

我试图通过HTML和CSS来实现以下布局：

在此布局中，你有一个红色的上格，这是100％的窗口宽度并且具有包含元素的高度 在其下方有一个绿色div，其中包含相邻的菜单项，它也是窗口宽度的100％，并且具有可填充窗口其余部分的高度。 旁边的绿色div有一个黄色的div，其中一时有0％的宽度。

当单击绿色div中的项目时，绿色div会向右移动，宽度是最宽菜单项的宽度和填充窗口其余部分的高度。 黄色div然后打开绿色div旁边，它的宽度覆盖窗口的其余部分。高度相同，这应该使其填充窗口的其余部分。它包含一个显示点击菜单项的iframe，并应该完全覆盖黄色div。

我没有问题，得到的第一个布局，但是切换到第二个时，我似乎无法获得绿色和黄色的div高度正确。

下面是我有：

<div id="Dashboard_CAClientDIV"> 
    Red div 
</div> 
<div id="Dashboard_MenuDIV"> 
    Green div 
    <div class="Dashboard_Tile"> 
     Item 1 
    </div> 
    <div class="Dashboard_Tile"> 
     Item 2 
    </div> 
    <div class="Dashboard_Tile"> 
     Item 3 
    </div> 
    <div class="Dashboard_Tile"> 
     Item 4 
    </div> 
    <div class="Dashboard_Tile"> 
     Item 5 
    </div> 
</div> 
<div id="Dashboard_FrameDIV"> 
    <iframe id="Yellow Div" src="" width="100%" height="100%"> 
</div> 

将第二布局添加 “_Exp” 到Dashboard_MenuDIV和Dashboard_FrameDIV，这里的CSS我有：

html, body, #frmDashboard { 
    /* any div up to fullscreen-cont must have this 
    in this case html and body */ 
    height:100%; 
    min-height:100%; 
    max-height: 100%; 
} 
body, div { 
    /*overflow: hidden;*/ 
    margin: 0px; 
} 
.Dashboard_Tile { 
    display:inline-block; 
} 
#Dashboard_MenuDIV_Exp, #Dashboard_FrameDIV_Exp { 
    min-height: 100%; 
    height: 100%; 
    max-height: 100%; 
    display: inline-block; 
} 
#Dashboard_MenuDIV_Exp .Dashboard_Tile { 
    min-width: 100%; 
    width: 100%; 
    max-width: 100%; 
    margin-top: 1px; 
} 
#Dashboard_CAClientDIV { 
    min-width:100%; 
    width:100%; 
    max-width:100%; 
} 
#Dashboard_MenuDIV { 
    min-width:100%; 
    width:100%; 
    max-width:100%; 
} 
#Dashboard_MenuDIV_Exp { 
    min-width:20%; 
    width:20%; 
    max-width:20%; 
    float: left; 
} 
#Dashboard_FrameDIV { 
    min-width:0%; 
    width:0%; 
    max-width:0%; 
} 
#Dashboard_FrameDIV_Exp { 
    min-width:75%; 
    width:75%; 
    max-width:75%; 
    float: left; 
} 

在此先感谢

Answer 1

使用新的CSS3柔性布局：http://css-tricks.com/snippets/css/a-guide-to-flexbox/：

工作小提琴：http://jsfiddle.net/5UXR9/2/

HTML：

<div id="Dashboard_CAClientDIV">Red div</div> 
<div id="Dashboard_Wrapper_MenuDIV_and__FrameDIV"> 
    <div id="Dashboard_MenuDIV"> 
     Green div 
     <div class="Dashboard_Tile small">Item 1</div> 
     <div class="Dashboard_Tile small">Item 2</div> 
     <div class="Dashboard_Tile very-large">Item 3</div> 
     <div class="Dashboard_Tile small">Item 4</div> 
     <div class="Dashboard_Tile large">Item 5</div> 
    </div> 
    <div id="Dashboard_FrameDIV"> 
     <iframe id="Yellow Div" src="" width="100%" height="100%"></iframe> 
    </div> 
</div> 

CSS：

body, html { 
    height: 100%; 
} 
#Dashboard_CAClientDIV { 
    background-color: red; 
    height: 40px; 
    width: 100%; 
} 
#Dashboard_Wrapper_MenuDIV_and__FrameDIV { 
    width: 100%; 
    height: 100%; 
    display: flex; 
} 
#Dashboard_MenuDIV { 
    background-color: green 
} 
#Dashboard_MenuDIV .Dashboard_Tile { 
    background-color: blue; 
    height: 50px; 
    margin-bottom: 5px; 
} 
#Dashboard_MenuDIV .Dashboard_Tile.small { 
    width: 100px; 
} 
#Dashboard_MenuDIV .Dashboard_Tile.large { 
    width: 200px; 
} 
#Dashboard_MenuDIV .Dashboard_Tile.very-large { 
    width: 300px; 
} 
#Dashboard_FrameDIV { 
    background-color: yellow; 
    flex: auto; 
} 
#Dashboard_FrameDIV iframe { 
    border: none; 
} 

Answer 2

好了，CSS3的解决方案已经给出，但如果你想有一个比较原始的方法（CSS2），你可以使用display:table属性来设置您的布局。下面是类似的情况为例：

http://jsfiddle.net/S562t/

HTML：

<div class="stage"> 
    <div class="row-top"> 
     <div class="top">red</div> 
    </div> 
    <div class="row-bottom"> 
     <div class="left"> 
      <div class="title">Title 1</div> 
      <div class="title">Title 2334234234</div> 
      <div class="title">Title 3</div> 
      <div class="title">Title 4</div> 
     </div> 
     <div class="right"> 
      <iframe src="" frameborder="0"></iframe> 
     </div> 
    </div> 
</div> 

CSS：

.stage 
{ 
    overflow: hidden; 
    display: table; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top:0; 
    left:0; 
} 

.row-top 
{ 
    display: table-row; 
    position: relative; 
    height: 30px; 
} 

.row-bottom 
{ 
    display: table-row; 
    position: relative; 
} 

.top 
{ 
    background-color: red; 
    display: table-cell; 
    position: absolute; 
    width: 100%; 
    height: 30px; 
} 

.left 
{ 
    background-color: green; 
    display: table-cell; 
} 

.right 
{ 
    background-color: yellow; 
    display: table-cell; 
} 

iframe 
{ 
    width: 100%; 
    height: 100%; 
} 

http://jsfiddle.net/S562t/