html - 表元素未占父元素的 100%

Question

我在 JSFiddle 中创建了一个情况示例

我在这里更新了 JSFiddle:http://jsfiddle.net/x11joex11/r5spu85z/8/ (这更详细地显示了粘性页脚如何工作得很好，只是高度问题)。

我想让 table 占据剩余的高度，出于某种原因 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/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;
}