HTML/CSS获得以下布局结构的最佳方法是什么

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

在这个布局中，您有一个红色的上div，它是窗口宽度的100%，并且具有包含元素的高度 下面是一个绿色的div，包含彼此相邻的菜单项，该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>

    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;
}

---

提前感谢

使用新的CSS3 flex布局：

工作小提琴：

HTML:

---

好的，已经给出了CSS3解决方案，但是如果您想要更原始的方法（CSS2），您可以使用

display:table

properties设置布局样式。下面是一个与您的情况类似的示例：



HTML:

---

你有没有一个脚本？JavaScript有什么功能？（你是如何将

\u Exp

添加到你的

div

s的？）哪些是你支持的浏览器？所有的大浏览器显然是：）

<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>

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;
}

<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>

.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%;
}