HTML5柔性盒模型高度计算

Posted 2023-03-06

【中文标题】HTML5柔性盒模型高度计算

【英文标题】：HTML5 flexible box model height calculation

【发布时间】：2011-12-02 07:48:40

【问题描述】：

研究了一整天的柔性盒子模型，我必须说我真的很喜欢它。它以一种快速而干净的方式实现了我在 javascript 中实现的功能。然而有一件事让我很烦恼：

我无法扩展 div 以获取由柔性盒模型计算的完整尺寸！！！

为了说明这一点，我将举一个例子。其中两个灵活的地方采用精确的 with 和高度，但其中的 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>

【参考方案1】：

我自己一直在努力解决这个问题，但最终设法想出了一个解决方案。

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

您基本上有两个问题，我将分别处理。

让弹性项目的孩子填充高度 100% 在孩子的父母上设置position:relative;。 在孩子身上设置position:absolute;。 然后您可以根据需要设置宽度/高度（在我的示例中为 100%）。 修复 Chrome 中调整大小滚动的“怪癖” 将overflow-y:auto; 放在可滚动的div 上。 可滚动的 div 必须明确指定高度。我的样本已经有 100% 的高度，但如果没有应用，您可以指定 height:0;

有关滚动问题的更多信息，请参阅answer。

【讨论】：

height: 100% 问题是 webkit 错误吗？还是在 W3C 建议中定义？

【参考方案2】：

您还必须使要扩展的 div 也成为一个 flex-box 并添加一个 flex 值。 这解决了问题。

#fullsize
    background-color: red;

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

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