html5弹性盒子模型?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (138)

我不能扩展一个div来获取由弹性盒子模型计算出来的全部大小!!!

例子。

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>
提问于
用户回答回答于

这解决了这个问题。

#fullsize{
    background-color: red;

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

    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;
}
用户回答回答于

解决方案。

看到这个jsFiddle,虽然我只添加了在Chrome中打开的webkit前缀。

你基本上有两个问题,我将分开处理。

  1. 填充高度100%
    • 设置position:relative;
    • 设置position:absolute;
    • 然后,根据需要设置宽度/高度(在我的示例中为100%)。

  2. 在Chrome中修复调整大小
    • overflow-y:auto;滚动div。
    • 可滚动的div必须有明确的高度指定。我的示例已经有100%的高度,你可以指定height:0;

扫码关注云+社区

领取腾讯云代金券