0

我正在尝试为移动 Web 应用程序创建一个灵活的布局，并且我正在努力使其与 CSS 表一起使用。目前我正在使用旧的 flexbox，但我想尝试使用 CSS 表复制它。我想要一个固定高度的标题和一个总是 100% 高的内容容器。

我哪里错了？flex-box 也会是更好的选择吗？（尽管不断变化）

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

.

我创建了一个（失败的）css 表示例 以及一个有效的弹性框示例

.

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

1 回答 1

1

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

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

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

编辑：更多关于为什么会发生这种情况的解释可以在这里找到。

于 2013-09-25T03:53:49.137 回答