blocks|key|2932365|text|由于对这个问题有一些兴趣，所以我将给出我找到的当前解决方案。它是在chrome上测试的(目前还没有其他浏览器使用这个示例，但是在FF上有另一个更大的浏览器，当我“简化它”的时候，它不知何故不能工作了…)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2932366|它背后的想法是，以某种方式使嵌套在灵活框中的元素扩展到灵活框元素的完整大小。为此，在内部添加了一个绝对位置元素，该元素到左、右、上和下的距离为0。|2932367|然而，即使在Chrome中，当缩小元素大小和调整元素大小以使滚动条消失时，也会出现错误。|2932368|下面是html：|2932369|<!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%25;
++++++++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%25;
++++++++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>|code-block|syntax|javascript|2932370|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>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"...).</p>

<p>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.</p>

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

<p>Here is the html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;flexbox example - 2 column layout&lt;/title&gt;
    &lt;meta name="author" content="Gwilym Johnston"&gt;
    &lt;style type="text/css"&gt;   
    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;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="box-orient-example" class="example"&gt;
        &lt;div id="box1"&gt;
            &lt;div class="abs"&gt;
                &lt;div class="rel"&gt; 
                    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.   
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="box2"&gt;
            &lt;div class="abs"&gt;
                &lt;div class="rel"&gt; 
                    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.   
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|3147063|text|您还必须使您想要展开的div成为flex-box，并添加flex值。这就解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3147064|#fullsize{
++++background-color:+red;

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

++++box-flex:1;
++++-webkit-box-flex:1;
++++-moz-box-flex:1;
}|code-block|syntax|javascript|3147065|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>#fullsize{
    background-color: red;

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

    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;
}
</code></pre>


blocks|key|2932397|text|我自己一直在努力解决这个问题，但最终还是想出了一个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2932398|请看这个jsFiddle，尽管我只添加了webkit前缀，所以在Chrome中是打开的。|offset|length|2932399|你基本上有两个问题，我将分别处理。|2932400|在子项的父项上设置高度100%25+|2932401|Getting+|ordered-list-item|style|BOLD|2932402|+position:relative;填充弹性项的子项。|unordered-list-item|CODE|2932403|在子对象上设置position:absolute;。|2932404|您可以根据需要设置宽度/高度(在我的示例中为100%25)。|2932405|2932406|2932407|​|2932408|2932409|Fixing的调整大小滚动“怪癖”在Chrome+|2932410|将overflow-y:auto;放在可滚动的div上。|2932411|必须为可滚动的div指定显式高度。我的示例高度已经达到100%25，但是如果还没有应用任何高度，您可以指定height:0;|2932412|2932413|2932414|2932415|有关滚动问题的详细信息，请参阅此answer。|2932416|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/poztin/MFHj7/1/|1|https://stackoverflow.com/a/14964944/295813^0|0|4|8|0|0|0|0|0|8|1|1|I|1|7|I|1|1|0|0|0|0|0|O|1|1|G|1|1F|9|1|0|0|0|G|6|1|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1N|8|@]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|F|3|G|5|6|7|1R|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1S|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1T|8|@$D|1U|E|1V|M|N]]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1W|8|@$D|1X|E|1Y|M|R]]|9|@]|A|$]]|$1|S|3|T|5|Q|7|1Z|8|@$D|20|E|21|M|R]]|9|@]|A|$]]|$1|U|3|V|5|Q|7|22|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|24|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|25|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|11|3|12|5|L|7|27|8|@$D|28|E|29|M|N]]|9|@]|A|$]]|$1|13|3|14|5|Q|7|2A|8|@$D|2B|E|2C|M|R]]|9|@]|A|$]]|$1|15|3|16|5|Q|7|2D|8|@$D|2E|E|2F|M|R]]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]|$1|19|3|Z|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2J|8|@]|9|@$D|2K|E|2L|1|2M]]|A|$]]|$1|1C|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|1J]]|1K|$5|1F|1G|1H|A|$1I|1L]]]]

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

<p>See this <a href="http://jsfiddle.net/poztin/MFHj7/1/" rel="noreferrer">jsFiddle</a>, although I have only added webkit prefixes so open in Chrome. </p>

<p>You basically have 2 issues which I will deal with separately.</p>

<ol>
<li><strong>Getting the child of a flex-item to fill height 100%</strong>

<ul>
<li>Set <code>position:relative;</code> on the parent of the child. </li>
<li>Set <code>position:absolute;</code> on the child.</li>
<li>You can then set width/height as required (100% in my sample).  </li>
</ul></li>
<li><strong>Fixing the resize scrolling "quirk" in Chrome</strong>

<ul>
<li>Put <code>overflow-y:auto;</code> on the scrollable div. </li>
<li>The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify <code>height:0;</code></li>
</ul></li>
</ol>

<p>See this <a href="https://stackoverflow.com/a/14964944/295813">answer</a> for more information on the scrolling issue.</p>


<p>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:</p>

<p><strong><em>I can't expand a div to take the full size calculated by the flexible box model!!!</em></strong></p>

<p>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 <code>"&lt;p&gt;...&lt;/p&gt;"</code> 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</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main" class="flexbox"&gt;
  &lt;div id="box-1" class="flexbox"&gt;
    &lt;div id="fullsize"&gt;
      &lt;p&gt;Hallo welt&lt;/p&gt;
    &lt;/div&gt;

  &lt;/div&gt;
  &lt;div id="box-2" class="flexbox"&gt; 

  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


HTML5 flexible box model height calculation

在研究了一整天的灵活盒子模型后，我必须说我真的很喜欢它。它以一种快速干净的方式实现了我在JavaScript中实现的功能。然而，有一件事让我感到困扰：我无法展开div以获取由弹性框模型计算的完整大小！为了说明这一点，我将举出一个例子。在它中，两个灵活的位置采用精确的with和height，但其中的div只采用"<p>....

问HTML5柔性箱体模型高度计算
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5柔性箱体模型高度计算EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5柔性箱体模型高度计算
EN