Question

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

要求：

顶部框是动态高度，内容需要绝对定位并考虑溢出（如果超出界限则隐藏）
底部框是固定高度

enter image description here

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

我一直在搞乱，并想出了这个here。它适用于Safari和Firefox。但是，我不确定的是，它是有效的CSS。基本上，如果我部署这个Web应用程序，我是否必须担心它将来会破坏，因为我违反了一些神秘而模糊的样式规则？如果是这样......我如何修复代码，以使其有效？

我并不担心浏览器会破坏它，因为它们会使渲染引擎陷入困境......因为它会得到修复。我担心这是否是有效的代码。

这是代码，小提琴中包含了CSS样式

<!-- 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，我无法找到任何建议支持这里的风格的内容。

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

1 个答案: