表元素不以100％的父元素

Question

我在JSFiddle

我更新的jsfiddle這裏創建的情況示例：http://jsfiddle.net/x11joex11/r5spu85z/8/（這表明更詳細地粘頁腳是如何工作的這麼好，只是身高問題）。

我想讓桌子佔用剩餘的高度，由於某些原因height: 100%不工作？

從我的測試中，它似乎與min-height: 100%有關。我需要這個讓粘性頁腳工作。

因此，對我來說，解決方案是另一種方式來做粘腳，或者仍然給100％身高的方法。

HTML

<div class="wrapper"> 
    <div class="wrapper_content"> 
    <!--Header--> 
    <div class="header">Header</div> 
    <div class="content table"> 
     <div class="row"> 
     <div class="l_cell">left</div> 
     <div class="r_cell">right</div> 
     </div> 
    </div> 
    <div class="push"></div> 
    </div> 
</div> 
<!--Footer--> 
<div class="footer">Footer</div> 

CSS

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

.wrapper { 
    min-height: 100%; 
    margin: 0 auto -50px; 
    background-color: black; 
} 

.container { 
} 

.table { 
    display: table; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
} 

.row { 
    display: table-row; 
} 

.l_cell { 
    display: table-cell; 
    width: 265px; 
    background-color: orange; 
} 

.r_cell { 
    display: table-cell; 
    background-color: purple; 
} 

.header { 
    background-color: red; 
    width: 100%; 
} 

.footer { 
    height: 50px; 
    background-color: green; 
} 

.push { 
    height: 50px; 
} 

Answer 1

我找到了答案，我的問題，現在，但它需要使用顯示：表，我記得成因的其它錯誤的道路，但它似乎現在正在創建我想要的佈局。

http://jsfiddle.net/x11joex11/r5spu85z/10/

CSS

body,html{margin:0;padding:0;height:100%;} 
.wrapper{} 
.table{ 
    height:100%; 
    width:100%; 
    display:table; 
    background-color:yellow; 
} 
.row{display:table-row;} 
.cell{display:table-cell;} 
.footer{background-color:green;height:50px;} 
.header{background-color:red;height:30px;} 
.left{background-color:purple;} 
.right{background-color:orange;} 

HTML

<div class="wrapper table"> 
    <div class="header row"> 
     Header<br/> 
     Header2 
    </div> 
    <div class="content table"> 
     <div class="row"> 
      <div class="cell left">leftt<br/>left2</div> 
      <div class="cell right">right<br/>right2</div> 
     </div> 
    </div> 
    <div class="footer row"> 
     Footer 
     <br/> 
     Footer2 
    </div> 
</div> 

不需要使用顯示器的答案：表或表格標記是優選的。

注意粘性頁腳效果仍然存在。

Answer 2

這裏是一個解決方案，http://jsfiddle.net/7t4RT/

這個問題已經被問過很多次。我建議查看StackOverflow中已經提供的一些答案。

我們無法在您的示例中使用height: 100%的原因是因爲沒有定義高度。該CSS想知道...以及多高是100％？有很多方法可以讓我們的元素以HTML或CSS填充它們的容器。只需選擇一款讓您感覺更適合您的產品。

以下是解決此問題的多種方法之一。

HTML：

<div class="fill-height"> 
    <p>Filled</p> 
</div> 
<div class="cant-fill-height"> 
    <p>Not Filled</p> 
</div> 

CSS：

body { 
    background-color: #ccc; 
} 

.fill-height { 
    background-color: #0ff; 
    width: 200px;  
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

.cant-fill-height { 
    background-color: #ff0; 
    width: 200px; 
    height: 100%; 
    margin-left: 200px; 
}