Question

我正在尝试使用CSS3 box-flex创建一个无滚动条的页面。这就是我所拥有的：

<html>
<body style="height:100%;display:-webkit-box;-webkit-box-orient:vertical;"> <!-- height is 1000px -->
<div style="height:100px;">test</div>
<div style="-webkit-box-flex:1.0;">
  <div style="height:100%;">test</div> <!-- expected this to be 900px, but it's 1000px -->
</div>
</body>
</html>

如何在不使用Javascript的情况下让子div填满页面的其余部分？（在这种情况下，它是900px）。

P.S。我为没有CSS3支持的浏览器调整了Javascript大小。

编辑： P.P.S：在我的代码中，子div实际上是一个iframe，而box-flex似乎不适用于iframe。

Answer 1

子div的高度由其内容决定：http://jsfiddle.net/yNQDK/

在这种情况下，一行文字

CSS3高度：100％和灵活的框创建意外行为

1 个答案: