Html HTML5 柔性盒模型高度计算

HTML5 flexible box model height calculation

提问by Stefan

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:

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

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

我无法展开一个 div 来获取弹性盒模型计算出的全尺寸！！！

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

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

回答by Brett Postin

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.

看到这个jsFiddle，虽然我只添加了 webkit 前缀，所以在 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;

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

See this answerfor more information on the scrolling issue.

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

回答by Michael Kork.

You must also make the div you want to expand a flex-box as well and add a flex value. This fixes the problem.

您还必须将要展开的 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;
}

回答by Stefan

since there is some interest in this question, I will give you the current solution I found. It's test in chrome (no other browser currently working with this sample, but got another bigger on working in FF which somehow doesn't work when I "simplyfy it"...).

由于对这个问题有些兴趣，我将向您提供我找到的当前解决方案。它是在 chrome 中测试的（目前没有其他浏览器使用这个示例，但在 FF 中工作时得到了另一个更大的结果，当我“简化它”时不知何故不起作用......）。

The idea behind it is, to somehow make the element nested inside the flexible box extend to the full size of the flexible box element. To do so an absolut position element is added inside, which has 0 distance to the left, right, top and bottom.

其背后的想法是，以某种方式使嵌套在弹性盒内的元素扩展到弹性盒元素的全尺寸。为此，在内部添加了一个绝对位置元素，它与左、右、上和下的距离为 0。

However, even in Chrome, there is an error, when downsizeing and resizing the element so that the scrollbar disapears.

但是，即使在 Chrome 中，当缩小和调整元素大小以使滚动条消失时，也会出现错误。

Here is the html:

这是html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>flexbox example - 2 column layout</title>
    <meta name="author" content="Gwilym Johnston">
    <style type="text/css">   
    html, body{
        height: 100%;
        margin: 0px;
    }
    #box-orient-example {
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        -ms-box-orient: horizontal;
        box-orient: horizontal;
        display: -moz-box;
        display: -webkit-box;
        display: -ms-box;
        display: box;
        height: 100%;
        overflow: auto;
    }
    #box1 {
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        -ms-box-flex: 1;
        background: none repeat scroll 0 0 lightblue;
        text-align: center;
        overflow: auto;
        position: relative;
    }
    #box2 {
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        -ms-box-flex: 1;
        background: none repeat scroll 0 0 #DDDDDD;
        text-align: center;
        overflow: auto;
        position: relative;
    }

    .abs {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
    .rel{
        position: relative;
    }
    </style>
</head>
<body>
    <div id="box-orient-example" class="example">
        <div id="box1">
            <div class="abs">
                <div class="rel"> 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
                </div>
            </div>
        </div>
        <div id="box2">
            <div class="abs">
                <div class="rel"> 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
                    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
            </div>
        </div>
    </div>
</body>
</html>