在研究了一天的柔性盒模型之后,我必须说我真的很喜欢它。它以快速、干净的方式实现了我在 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>
最佳答案
我自己一直在努力解决这个问题,但最终设法想出了一个解决方案。
查看此 jsFiddle ,虽然我只添加了在 Chrome 中打开的 webkit 前缀。
您基本上有 2 个问题,我将分别处理。
- 让弹性项目的 child 填充高度 100%
- 在 child 的 parent 身上设置
position:relative;
。 - 为 child 设置
position:absolute;
。 - 然后您可以根据需要设置宽度/高度(在我的示例中为 100%)。
- 在 child 的 parent 身上设置
- 修复 Chrome 中调整大小滚动的“怪癖”
- 将
overflow-y:auto;
放在可滚动的 div 上。 - 可滚动的 div 必须明确指定高度。我的样本已经有 100% 的高度,但如果没有应用,您可以指定
height:0;
- 将
查看此 answer有关滚动问题的更多信息。
关于HTML5柔性盒模型高度计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7676022/