Question

我有包装，其中定义了高度，内部有两个容器：顶部和底部。顶部容器的高度不是固定的（在示例中它设置为100px，但这仅用于演示）。我想要的是动态设置底部容器以填充包装器的其余部分。

在本演示中，我使用JS：

进行了演示

$(function() {
  var top = $('#top');
  var bottom = $('#bottom');
  bottom.height(bottom.parent().height()-top.outerHeight());
});

你认为在纯HTML / CSS中有办法吗？无论如何，我甚至可以使用表格。我一直在考虑解决方案一段时间，并没有发现任何跨浏览器兼容的解决方案。谢谢你的帮助。

更新1： 我在定义这些问题时犯了一个错误 top 没有固定的高度 - 它是由它的内容定义的。 http://jsbin.com/ixiju4/6

更新2： 好。这就是我真正想要的： http://jsbin.com/ixiju4/8

Answer 1

对此有一个非常简单的纯CSS解决方案：

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #top {
    height: 100px;
    width: 100%;
    background-color: #00f4f7;

  }
   #bottom {
    background-color: #00f400;
    width: 100%;
    height: 100%
  }

更新2 从上一轮编辑到问题之后，我相应更新了CSS，即：

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #top {
    background-color: #00f4f7;   
  }

  #bottom {
    background-color: #00f400;
    height: 100%;
    padding: 10px;
  }

  #inner {
    height: 100%;
    background-color: #f0f400;
    margin-bottom: 10px;
  }

Answer 2

好吧，如果你可以使用表格：

<table style="height:400px">
  <tr>
    <td style="height:100px">Fixed to arbitrary value</td>
  </tr>
  <tr>
    <td style="height:auto">Dynamically filling</td>
  </tr>
</table>

http://jsbin.com/ixiju4/3

免责声明：亲爱的Google员工，如果您找到了答案：不要在家里这样做！造型表是邪恶的。使用display: table和display: table-row可以在除IE＆lt;之外的所有内容中实现相同的效果8

编辑2：确定，完整性：

#wrapper { display: table; }

#top, #bottom { display: table-row; }

在IE中不起作用＆lt; 8，如上所述。 http://jsbin.com/ixiju4/5

编辑3：我真的很失明。是的，Tiny Giant Studios以明显的方式回答了这个问题。你应该回答他的问题。（我要完全离开我了。）

如何在纯HTML / CSS中创建动态水平布局没有JS？

2 个答案: