HTML5灵活的盒子模型高度计算

Question

在研究了灵活的盒子模型一整天后,我必须说我真的很喜欢它.它以快速,干净的方式实现了我在JavaScript中实现的功能.然而有一件事让我感到困惑:

我不能扩展div来采取灵活的盒子模型计算的全尺寸!

为了说明这一点,我将证明一个例子.在其中两个灵活的位置采用精确的和高度,但其中的div只占用"<p>...</p>"元素的高度.对于这个例子并不重要,但我最初尝试的是在另一个"灵活的盒子模型"中放置一个"灵活的盒子模型",这在我看来一定是可能的

html, body {
  font-family: Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#box-1 {
  background-color: #E8B15B;

}
#box-2 {
  background-color: #C1D652;
}
#main {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}


.flexbox {
  display:-moz-box;
  display:-webkit-box;
  display: box;
  text-align: left;
  overflow: auto;
}
H1 {
  width: auto;
}
#box-1 {
  height: auto;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;

  -moz-box-flex: 3;
  -webkit-box-flex: 3;
  box-flex: 3;
}
#box-2 {
  height: auto;
  min-width: 50px;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;

  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
}
#fullsize{
  background-color: red;
  height: 100%;
}

<div id="main" class="flexbox">
  <div id="box-1" class="flexbox">
    <div id="fullsize">
      <p>Hallo welt</p>
    </div>

  </div>
  <div id="box-2" class="flexbox"> 

  </div>
</div>

Answer 1

我自己一直在努力解决这个问题,但终于找到了解决方案.

看到这个jsFiddle,虽然我只在Chrome中添加了webkit前缀.

你基本上有2个问题,我将分别处理.

1. 让灵活项目的孩子填充高度100%
   • 设置position:relative;在孩子的父母身上.
   • 坐落position:absolute;于孩子.
   • 然后,您可以根据需要设置宽度/高度(我的样本中为100%).
2. 在Chrome中修复调整大小滚动"quirk"
   • 穿上overflow-y:auto;可滚动的div.
   • 可滚动div必须具有指定的显式高度.我的样本已经有100%的高度,但如果没有应用,你可以指定height:0;

有关滚动问题的详细信息,请参阅此答案.

Answer 2

您还必须将要扩展的 div 也设置为弹性框并添加弹性值。这解决了问题。

#fullsize{
    background-color: red;

    display: -webkit-box;
    display: box;
    display: -moz-box;

    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;
}