1. 首页
  2. 问答
  3. HTML5灵活盒模型的高度计算

HTML5灵活盒模型的高度计算

2011-10-06 60 views
19

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

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

来说明吧，我会证明是一个例子。其中两个灵活的地方采用精确的高度和高度，但其中的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>

来源

2011-10-06 Stefan

回答

34

我一直在与自己搏斗，但终于设法提出了一个解决方案。

看到这个jsFiddle，虽然我只加了前缀的WebKit在Chrome如此开放。

基本上，你有2个问题，我会分开处理。

  1. 获得柔性项的孩子填写身高100％
    • 设置position:relative;对孩子的父母。
    • 设置position:absolute;对孩子。
    • 然后，您可以根据需要设置宽度/高度（在我的示例中为100％）。
  2. 固定容量调整滚动 “怪癖” 在Chrome
    • 将overflow-y:auto;上滚动的DIV。
    • 可滚动div必须具有指定的显式高度。我的样品已经具有高度的100％，但如果已经应用于无你可以指定height:0;

上滚动问题的详细信息，请参阅本answer。

来源

2013-03-13 14:33:46

+1

“height：100％”是否发出webkit错误？或者是W3C建议中定义的那个？ – Xenos

0

既然对这个问题有一些兴趣，我会给你我目前找到的解决方案。它是在Chrome中测试的（目前没有其他浏览器使用这个示例，但在FF中工作时又有更大的工作量，当我“简单地工作”时，这种工作方式不起作用）。

背后的想法是，以某种方式使嵌套在柔性盒内的元素延伸到弹性框元素的全尺寸。为此，在内部添加绝对位置元素，其距离左侧，右侧，顶部和底部的距离为0。

然而，即使在镀铬，有一个错误，downsizeing和调整大小的元件，使得所述滚动条在前看不见时。

下面是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>

来源

2012-01-09 10:15:05 Stefan

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

来源

2012-05-03 09:51:23

相关问题

 相关问题