Question

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

我无法扩展div以获取灵活的盒子模型计算的完整尺寸!!!

为了说明这一点，我将证明一个例子。在其中，两个灵活的位置采用精确的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>

Answer 1

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

请参阅此jsFiddle，虽然我只在Chrome中添加了webkit前缀。

你基本上有2个问题，我将单独处理。

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

有关滚动问题的详细信息，请参阅此answer。

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;
}

Answer 3

因为对这个问题有兴趣，我会告诉你我找到的当前解决方案。它是在chrome中测试的（没有其他浏览器正在使用这个示例，但是在FF中工作时又有一个更大的工作，当我“简单地说”它时，某种方式不起作用......）。

它背后的想法是，以某种方式使嵌套在柔性框内的元素扩展到灵活框元素的完整大小。为此，在内部添加绝对位置元素，其与左，右，顶部和底部的距离为0。

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

这是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>

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

3 个答案: