Question

我正在尝试为移动网络应用创建灵活的布局，并且我正努力使用CSS表格来完成这项工作。目前我正在使用旧的flexbox，但我想尝试用CSS表复制它。我想有一个固定的高度标题，内容容器始终是100％高。

我哪里错了？柔性盒也是更好的选择吗？（虽然在变化中）

    -----------------------------
    |          .header          |
    -----------------------------
    |                           |
    |                           |
    |                           |
    |      .inner-container     |
    |                           |
    |                           |
    -----------------------------

我创建了一个（失败的）css table example 还有一个有效的flex box example

<div class='wrap'>    
    <div class='header'></div>
    <div class='inner-container'></div>
</div>



.wrap {
    display: table;
    overflow: hidden;  
    width: 100%;
    height: 100%;
    border: 1px solid;
}

.header {
    display: table-cell;
    background: red;
    height: 60px;
    width: 100%;
}

.inner-container {
    display: table-cell;
    background: blue;
    width: 100%;
    height: 100%;
}

Answer 1

首先，您将.header和.inner-container显示为表格单元格，因此它们将彼此相邻而不是堆叠。

但主要的问题是，除非您在wrap上设置像素高度，否则您要尝试执行的操作很困难，因为浏览器会计算高度。

如果您查看this fiddle，并将外部div的高度更改为1000px而不是100%，您会注意到您获得了正确的尺寸，但是您不会height: 100%。

编辑：可以找到有关其原因的更多说明here。

如何创建固定标题和100％内部容器？

1 个答案: