堆積DIVs - 動態高度頂部DIV（有效的CSS？）

Question

我想弄清楚如何在移動web應用程序中使用HTML/CSS在我的視圖中堆疊兩個框。我不想在此框架設計中的任何位置使用JavaScript或硬編碼值。

要求：

• 機頂盒是動態的高度，內容需要被絕對定位和佔溢出（這是要隱藏如果出界）

• 底框是固定的高度

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

我一直在搞亂，想出了這個here。它適用於Safari和Firefox。不過，我所知道的不是，這是它的有效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

看起來堅實給我的CSS樣式。這是有效的CSS3，我找不到任何建議支持這裏的風格將被丟棄。