堆叠 DIVs - 顶部动态高度 DIV（有效 CSS？）

Question

我正在尝试弄清楚如何使用 HTML/CSS 在我的视图中为移动 Web 应用程序堆叠两个框。我不想在这个骨架设计中的任何地方使用 JavaScript 或硬编码值。

要求：

顶框为动态高度，内容需绝对定位并考虑溢出（越界则隐藏）
底框固定高度

http://i.imgur.com/Zun8oIi.png

我一直在胡闹，想出了这个 here。它适用于 Safari 和 Firefox。然而，我不能确定的是，它是有效的CSS。基本上，如果我部署这个 Web 应用程序，我是否需要担心它在未来会因为我违反了一些晦涩难懂的样式规则而崩溃？如果是这样...我怎样才能修复代码，使其有效？

我不担心浏览器会破坏它，因为它们破坏了渲染引擎...因为它会得到修复。我担心这是否是有效的开始代码。

这是代码，CSS 样式包含在 fiddle

中

<!-- this is the body of the page, with padding -->
<div class="BodyContainer" >
    <!-- define our table -->
    <div class="table" style="padding: 0; margin: 0; width: 96vw">
        <!-- row -->
        <div style="display: table-row; padding: 0; margin: 0">
            <!-- cell -->
            <!-- this is the cell that needs to be dynamic height -->
            <!-- and overflow hidden any possible content as well -->
            <div class="cell" style="width: 100%">
                <!-- relative inner cell -->
                <div style="position:relative; height: 100%; padding: 0">
                    <!-- absolute hidden cell that takes up the entire space -->
                    <div style="position:absolute; top: 0; bottom:0; left: 0; right:0; padding: 0; background: yellow; overflow: hidden;">
                                    This text appears on the top 
                        <!-- fixed bottom content -->           
                        <div style="position: absolute; bottom: 0">
                            This text appears on the bottom of the cell
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: table-row">
            <!-- bottom row that's fixed size -->
            <div class="cell" style="background-color: red; border-top: 2vw solid black;">
                <!-- content that will change on page to page -->
                <div style="height: 20vw !important;">
                    foo
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我觉得很结实。它是有效的 CSS3，我找不到任何建议将删除对这里样式的支持。

堆叠 DIVs - 顶部动态高度 DIV（有效 CSS？）

Stacking DIVs - Dynamic Height Top DIV (Valid CSS?)

html

css

dynamic

css-tables