Question

我需要创建一个包含工具栏，（可变高度）标签行，内容视图和信息视图的布局。整个内容必须始终填满整个浏览器窗口，而不会导致滚动条出现。只有内容和信息面板可以有滚动条，并且只有当它们溢出时。 My layout so far似乎适用于Chrome，但不适用于Firefox或Internet Explorer。我不能使用绝对位置，因为标签行的高度可能不同，我真的想避免使用JavaScript进行布局。

现在我有了这个标记：

<body>
    <table>
        <tr>
            <td colspan="2" class="toolbar">toolbar</td>
        </tr>
        <tr class="tabs">
            <td colspan="2" class="tabs">tabs</td>
        </tr>
        <tr>
            <td class="content">
                <div>content content content content</div>
            </td>
            <td class="info">info</td>
        </tr>
    </table>
</body>

这个css：

html, body, body > table {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body > table {
    border-collapse: collapse;
    border-spacing: 0;
}
body > table > tbody > tr > td {
    padding: 0;
    vertical-align: top;
}
.toolbar { background-color: red; }
.tabs { background-color: green; }
.content {
    background-color: blue;
    height: 100%;
}
.content > div {
    height: 100%;
    overflow: auto;
}
.info {
    background-color: yellow;
    width: 300px;
}

它必须如下所示：

Intended layout

Answer 1

尝试类似this fiddle

的内容

它比使用CSS的常规表格布局更复杂，但是应该通过一些调整来为你工作。

HTML

<div class='viewport'>
    <div class='caption'>
        <div class='toolbar'>toolbar</div>
        <div class='tabs'>tabs</div>
    </div>   
    <div class='row'>    
        <div class='content'>content</div>
        <div class='info'>info</div>
    </div>
</div>

CSS

body, .viewport{
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}

.viewport{
    display:table;    
    position:fixed;
    height:100%;
}
.row{
    display:table-row;
}
.caption{
    display: table-caption;
}
.content, .info{
    display:table-cell;
}
.toolbar{
    background:red;
}
.tabs{
    background:green;
}
.content{
    background:blue;
}
.info{
    background:yellow;
}

内容高度为100％的Html布局和单独的工具栏

1 个答案:

尝试类似this fiddle