如何在可用瀏覽器空間中使div 100％？

Question

我想在可用瀏覽器空間中製作第三行（紅色）100％的高度。請讓我知道我該如何做到這一點？如果我減少瀏覽器的高度，它應該是靈活的。

這裏是Fiddle

HTML：

<div class="wrapper"> 
    <div class="first_row">first row</div> 
    <div class="second_row">second row</div> 
    <div class="third_row">third row</div> 
    <div class="fourth_row">fourth row</div> 
</div> 

CSS：

* { 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
.first_row, .second_second, .fourth_row { 
    height:50px; 
} 
.first_row { 
    background:gray; 
} 
.second_row { 
    background:#ccc; 
} 
.third_row { 
    height:100%; 
    background:red; 
} 
.fourth_row { 
    background:#ccc; 
} 

Answer 1

//編輯由於筆者的問題更具體的描述：

如果你想你的4排一起去阿瓦YS高達父（身體），而1,2和第4行僅具有50px的高度，試試這個：

CSS：

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

.div-table { 
    display:table; 
    width:100%; 
    height:100%; 
} 

.div-table-row { 
    display:table-row; 
} 

.div-table-row:nth-child(1),.div-table-row:nth-child(2),.div-table-row:nth-child(4) { 
    height:50px; 
    background-color:#cccccc; 
} 

.div-table-row:nth-child(3) { 
    background-color:red; 
} 

.div-table-cell { 
    display:table-cell; 
} 

HTML：

<div class="div-table"> 
    <div class="div-table-row"> 
     <div class="div-table-cell first-content">1</div> 
    </div> 
    <div class="div-table-row"> 
     <div class="div-table-cell first-content">2</div> 
    </div> 
    <div class="div-table-row"> 
     <div class="div-table-cell first-content">3</div> 
    </div> 
    <div class="div-table-row"> 
     <div class="div-table-cell first-content">4</div> 
    </div> 
</div> 

的jsfiddle：http://jsfiddle.net/33Kzu/8/

下一次，請使用搜索，因爲這是一個基本的CSS，不應該問，但搜索。