Question

中创建了一个情境示例

我在这里更新了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/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;
}

Answer 2

我现在找到了一个问题的答案，但它需要使用display：table，我记得这会导致其他错误，但它现在似乎可以用来创建我想到的布局。 / p>

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>

不需要使用display：table或table标签的答案是首选。

请注意粘性页脚效果仍然存在。

表元素不占100％父元素

2 个答案: