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

【问题标题】：Html layout with content height 100% and separate toolbar内容高度为 100% 和单独工具栏的 Html 布局
【发布时间】：2013-12-07 06:35:35
【问题描述】：

我需要创建一个包含工具栏、（可变高度）选项卡行、内容视图和信息视图的布局。整个内容必须始终填满整个浏览器窗口，而不会出现滚动条。只有内容和信息面板可以有滚动条，并且只有当它们溢出时。 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;
}

它必须是这样的：

【问题讨论】：

为什么要使用表格布局？现在的“标准”是使用
元素，这提供了更多的灵活性和更可预测的行为。
我尝试了表格，因为我也无法让
元素工作，尽管我更喜欢它们。但是使用表格，我更接近于使用
s 所做的实际结果。

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