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

Question

我正在尝试通过 HTML 和 css 实现以下布局：

在此布局中，您有一个红色的上部 div，它是窗口宽度的 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 flex 布局：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/