解決CSS高度問題

Question

好的，任何已經使用css和html足夠長時間的人可能已經處理了「身高：100％」這些荒謬問題。我已經閱讀了一些處理它的東西，但沒有多大幫助。以下是我需要構建的佈局。我希望很好的答案能幫助我解決大多數其他需要身高的結構。
規則：

• 必須填寫的瀏覽器窗口，而不給予任何滾動。
• 容器的高度不得超出可見區域（即不需要「溢出：隱藏」在html或body標籤只是刪除滾動條）
• 柔性區域應調整到給定像素測量，而FILLER應該填充任何可用的區域。
• 所有區域的尺寸應嚴格控制在溢出時應切斷其內容，而不要使區域變大。
• 如果可能，我會寧願沒有「位置：固定」或「位置：絕對」，如果任何時候以後我需要這樣的結構內部其他包裝，但現在我會很高興能夠以任何方式。
• 最後，我真的不想使用它的JavaScript。

 
+-------------------------------------------+ 
|     FLEX /\     | 
|      \/     | 
+-----------------------------------+-------+ 
|         |  | 
|         |  | 
|         |  | 
|         |  | 
|    /\     |  | 
|   <FILLER>    | FLEX | 
|    \/     | <- -> | 
|         |  | 
|         |  | 
|         |  | 
|         |  | 
+-----------------------------------+-------+ 

編輯：
到目前爲止，我發現我能達到什麼樣的@cimmanon說的話在他的第二個例子，再加上消除了對頭部的側多餘的空間。我通過創建兩個表（一個用於包裝標題和另一個包裝內容和邊欄的表）來做到這一點，這是一種不好的做法。但是，如果它是唯一的方法來做到這一點（當試圖堅持經典的CSS，並避免使用像flexbox黑客），然後我堅持它。

我還有一個問題，這也是在@ cimmanon的第二個例子中發現：我的一個規則的狀態：所有區域應嚴格尺寸使得它們的含量應溢出時被切斷，沒有使該地區更大。。在爲每個容器添加了一堆隨機框之後，我發現它們將底部的兩個容器推出了瀏覽器的底部，創建了一個滾動條。這是因爲討厭的概念，高度：100％意味着瀏覽器的視口高度，或者內容的高度，如果它更高 - 在這種情況下是這樣。

有沒有辦法解決這個問題？

Answer 1

給一個固定的高度，你的包裝，然後除以Flex和使用的填料百分比 的高度（eg.flex = 25％和填料= 75％） 或 你將不得不使用JavaScript（window.innerHeight）用於獲取頁面被瀏覽的窗口的高度。

Answer 2

最優雅的方法是使用Flexbox。

http://codepen.io/cimmanon/pen/rifzt

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#layout { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    height: 100%; 
    /* fix for old Firefox */ 
    width: 100%; 
} 

#layout header { 
    height: 10em; 
    background: #ffffcc; 
} 

.wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1 auto; 
    -ms-flex: 1 auto; 
    flex: 1 auto; 
    /* fix for old Firefox */ 
    width: 100%; 
} 

#layout article { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

#layout aside { 
    width: 15em; 
    background: #ccccff; 
} 

<article id="layout"> 
    <header> 
    <h1>Header Title</h1> 
    </header> 

    <div class="wrapper"> 
    <article> 
     <h1>Another Title</h1> 

     <p>...</p> 
    </article> 

    <aside> 
     <h1>Aside Title</h1> 

     <p>...</p> 
    </aside> 
    </div> 
</article> 

http://caniuse.com/flexbox

你可以用表/錶行/表單元格顯示屬性，而不是這樣做，但你必須增加很多額外的標記來獲得它工作。

這幾乎的作品，但標題不完全跨越視口的整個寬度。如果你添加了足夠的元素，你可能可以做到。

http://tinker.io/38b0d

html { 
    height: 100%; 
} 

body { 
    display: table; 
    width: 100%; 
    height: 100%; 
    background: yellow; 
} 

header { 
    height: 10em; 
    display: table-row; 
} 

article { 
    display: table-row; 
    height: 100%; 
    width: 100%; 
    background: grey; 
} 

article div, article aside { 
    display: table-cell; 
    height: 100%; 
} 

article aside { 
    width: 10em; 
    background: orange; 
} 

<header>Header</header> 

<article> 
    <div class="main"> 
     Remaining Space 
    </div> 

    <aside> 
     Sidebar 
    </aside> 
</article>