HTML5灵活框模型高度计算 [英] HTML5 flexible box model height calculation

问题描述

在研究灵活的盒子模型一整天之后，我必须说我非常喜欢它。它以快速和干净的方式实现了我在JavaScript中实现的功能。然而，有一件事情让我感到担忧：

我无法扩展div来获取由灵活盒子模型计算的全尺寸！ em>

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

  html，body {font-family：Helvetica，Arial，sans-serif;宽度：100％;身高：100％; margin：0px; padding：0px;}＃box-1 {background-color：＃E8B15B;}＃box-2 {background-color：＃C1D652;}＃main {width：100％;身高：100％;溢出-x：auto; overflow-y：hidden;}。flexbox {display：-moz-box;显示：-webkit盒;显示：盒子; text-align：left; overflow：auto;} H1 {width：auto;}＃box-1 {height：auto; -moz-box-orient：垂直; -webkit-box-orient：vertical; box-orient：vertical; -moz-box-flex：3; -webkit-box-flex：3; box-flex：3;}＃box-2 {height：auto;最小宽度：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;高度：100％;}  

 < div id = mainclass =flexbox> < div id =box-1class =flexbox> < div id =fullsize> < p>你好wel&< / p> < / DIV> < / DIV> < div id =box-2class =flexbox> < / div>< / div>  

解决方案

：//jsfiddle.net/poztin/MFHj7/1/rel =noreferrer> jsFiddle ，尽管我只添加了在Chrome中打开的webkit前缀。

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

1. 获取弹性项目的子项以填充高度100％
   
   
   
   
   • 设置 position：relative; code>在孩子的父母身上。
   
   
   • 设置位置：绝对; 对于孩子。
   
   
   • 然后，您可以设置宽度/根据需要设置高度（在我的示例中为100％）。
   
   


2. 修复Chrome中调整大小的quirk
   
   
   
   
   • 在可滚动div上放置 overflow-y：auto; 。
   
   
   • 可滚动div必须具有指定的显式高度。我的示例已经有100％的高度，但如果没有应用，您可以指定 height：0;
   
   

请参阅此回答以获取更多关于滚动问题。

after researching the flexible box model for a whole day, I must say I really like it. It implements the functionality I implement in JavaScript in a fast and clean way. One thing however bugs me:

I can't expand a div to take the full size calculated by the flexible box model!!!

To illustrate it I'll proved an example. In it the two flexible places take the exact with and height, but the div inside it only takes the height of the "<p>...</p>" element. For this example it doesn't matter but what I originally was trying was placing a "flexible box model" inside another "flexible box model" and this must be possible in my opinion

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>

解决方案

I've been wrestling with this myself, but have finally managed to come up with a solution.

See this jsFiddle, although I have only added webkit prefixes so open in Chrome.

You basically have 2 issues which I will deal with separately.

1. Getting the child of a flex-item to fill height 100%
   • Set position:relative; on the parent of the child.
   • Set position:absolute; on the child.
   • You can then set width/height as required (100% in my sample).
2. Fixing the resize scrolling "quirk" in Chrome
   • Put overflow-y:auto; on the scrollable div.
   • The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify height:0;

See this answer for more information on the scrolling issue.

这篇关于HTML5灵活框模型高度计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！