CSS調整任何分辨率的高度/寬度

Question

我試圖建立一些即將在電視屏幕上運行的東西，分辨率會很大，但可能是任何東西。

我想出了下面的HTML/CSS組合，它幾乎可以工作（但是，如果高度太小，表格會與頁腳的底部重疊，並且表格右側的填充與右側重疊）

一個JS小提琴可以在這裏找到：http://jsfiddle.net/hyLrj2t4/

HTML：

<div class="flexbox-parent"> 
    <div class="flexbox-item header"> 
     Header 
    </div> 

    <div class="flexbox-item fill-area content flexbox-item-grow"> 
     <div class="fill-area-content flexbox-item-grow"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td bgcolor="#FF0000">&nbsp;</td> 
     </tr> 
     <tr> 
     <td bgcolor="#00FF00">&nbsp;</td> 
     </tr> 
     <tr> 
     <td bgcolor="#0000FF">&nbsp;</td> 
     </tr> 
     <tr> 
     <td bgcolor="#FF0000">&nbsp;</td> 
     </tr> 
     <tr> 
     <td bgcolor="#00FF00">&nbsp;</td> 
     </tr> 
     <tr> 
     <td bgcolor="#0000FF">&nbsp;</td> 
     </tr> 

    </table> 
     </div> 
    </div> 

    <div class="flexbox-item footer"> 
     Footer 
    </div> 
</div> 

CSS：

個

*, *:before, *:after 
{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html, body 
{ 
    width: 100%; 
    height: 100%; 

    margin: 0; 
    padding: 0; 
} 

body 
{ 
    background: #444444; 

    color: #cccccc; 
    font-size: 14px; 
    /* Helvetica/Arial-based sans serif stack */ 
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 

} 

.flexbox-parent 
{ 
    width: 100%; 
    height: 100%; 

    display: flex; 
    flex-direction: column; 

    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */ 

    background: rgba(255, 255, 255, .1); 
} 

.flexbox-item 
{ 
    padding: 0.5%; 
} 
.flexbox-item-grow 
{ 
    flex: 1; /* same as flex: 1 1 auto; */ 
} 

.flexbox-item.header 
{ 
    background: rgba(255, 0, 0, .1); 
} 
.flexbox-item.footer 
{ 
    background: rgba(0, 255, 0, .1); 
} 
.flexbox-item.content 
{ 
    background: rgba(0, 0, 255, .1); 
} 

.fill-area 
{ 
    display: flex; 
    flex-direction: row; 

    justify-content: flex-start; /* align items in Main Axis */ 
    align-items: stretch; /* align items in Cross Axis */ 
    align-content: stretch; /* Extra space in Cross Axis */ 

} 
.fill-area-content 
{ 
    background: rgba(0, 0, 0, .3); 
    border: 1px solid #000000; 

    /* Needed for when the area gets squished too far and there is content that can't be displayed */ 
    overflow: auto; 
} 

table{ 
    height:88%; 
    position:absolute; 
    } 

違規的物品在這裏可以看到在黃色方塊：

Answer 1

貌似整個佈局可以在不flex如果我正確地把它完成，請參閱簡化演示如下。

http://jsfiddle.net/1yp2jh2t/

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.container { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #333; 
 
    color: white; 
 
} 
 
.container > div { 
 
    display: table-row; 
 
} 
 
.container > div > div { 
 
    display: table-cell; 
 
} 
 
.container > div:nth-child(2) > div { 
 
    height: 100%; 
 
} 
 
.container table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div><div>Header</div></div> 
 
    <div> 
 
     <div> 
 
      <table> 
 
       <tr><td bgcolor="#FF0000"></td></tr> 
 
       <tr><td bgcolor="#00FF00"></td></tr> 
 
       <tr><td bgcolor="#0000FF"></td></tr> 
 
       <tr><td bgcolor="#FF0000"></td></tr> 
 
       <tr><td bgcolor="#00FF00"></td></tr> 
 
       <tr><td bgcolor="#0000FF"></td></tr> 
 
      </table> 
 
     </div> 
 
    </div> 
 
    <div><div>Footer</div></div> 
 
</div>