子级高度未知的CSS Flexbox布局100%
我有一个问题，我假设将是一个相对简单的CSS布局。
我想要。。。
- 底部的页脚（固定高度）
- 左侧的导航条（固定宽度）
- 右侧的外部内容窗格（动态大小）
在内容窗格中。。。
- 顶部的缎带（固定高度）
- 内部内容div（动态大小）
我正在尝试使用flexbox来实现这一点，因为它似乎是目前最好的选择（网格太不稳定，并且没有得到很好的支持）。
问题是，我的内部内容div（实际上）在外部内容div中有好几层。这意味着我不能直接在其上使用flexbox，因为flex是一种直接的父子关系（根据代码中的注释，我有几层）。
理想情况下，我希望按照下面的代码进行操作，但是正如您所看到的，内部div在包含外部div的框外部流动，在页脚后面，然后在整个容器外部流动（对于ribbon div的高度）。
“身高：100%”似乎无法正确处理它。。。但我不能用flexbox设置链中从“内容”到“内部”的每一项，因为我实际上无法控制这一点。（我使用angular，它在每一层生成一组标记，并动态命名）。
body {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
flex-direction: column;
height: 100%
}
.body {
display: flex;
flex: 1;
}
.content {
background-color: blue;
flex: 1;
}
.ribbon {
background-color: orange;
height: 99px;
}
.inner {
overflow: auto;
height: 100%;
}
.footer {
background-color: lime;
flex: 0 0 38px;
}<body>
<div class="container">
<div class="body">
<div class="content">
<div class="ribbon">STUFF<br>BLAH</div>
<!-- there is actually a bunch of other stuff in between "content" and "inner"-->
<div class="inner">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>我做了一个演示来证明这个问题。。。
https://plnkr.co/edit/zzFHhLK7nef1VNQkwp7U?p=preview
任何帮助将不胜感激！
共有1个答案
我建议制作第二层flexbox，方法是在中添加，除了现有的display:flex和flex-direction:column。内容flex:1：
.content {
flex: 1;
display: flex;
flex-direction: column;
}
考虑到flexbox是父子关系，您需要将flex： 1添加到任何直接属于. Content的子元素，这可以通过使用子组合器来完成
.content > * {
flex: 1;
}
除此之外，您还需要在上设置最大高度。功能区：
.ribbon {
max-height: 99px;
}
结合起来，可以在以下示例中看到这一点：
body {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
flex-direction: column;
height: 100%
}
.body {
display: flex;
flex: 1;
}
.content {
background-color: blue;
flex: 1;
display: flex;
flex-direction: column;
}
.content > * {
flex: 1;
}
.ribbon {
background-color: orange;
height: 99px;
max-height: 99px;
}
.inner {
overflow: hidden;
height: 100%;
}
.footer {
background-color: lime;
flex: 0 0 38px;
}<body>
<div class="container">
<div class="body">
<div class="content">
<div class="ribbon">STUFF<br>BLAH</div>
<!-- there is actually a bunch of other stuff in between "content" and "inner"-->
<div class="inner">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
-
我试图弄清楚如何最大化中的节点的宽度和高度。我想要打包到中的主要原因是，我想要包含一个从我的到并返回的。要做到这一点，我需要一个虚拟节点，它将被来回移动，并且该节点必须具有绝对定位。 根据这个SO问题，例如，我需要使用一个，我试图在下面的MWE中实现这个组。 我想基本上避免通过硬编码设置的首选大小。我知道将splitpane的WidthProperty/HeightProperty绑定到根也是可能
-
帮助我使用XML布局。 我在活动上有三个LinearLayout,所有LinearLayout的位置都是垂直的（从上到下） null
-
我直接在相对布局中有两个线性布局。 我希望第一个LinearLayout占据75%的高度，接下来占据25%。我如何实现这一点？ 例如 我希望线性布局1使用可用高度的75%，线性布局2使用25%<没有为LinearLayout定义layout_weight，因此显然它不起作用。 我有什么办法可以做到这一点吗？ 这似乎是一个非常常见的场景，所以我几乎可以肯定这个问题以前被问过。 但我似乎没有找到它。请
-
我试图理解我的意外行为： 容器中有一个最大高度为100%的元素，该容器也使用了最大高度，但意外的是，子元素溢出了父元素： 测试用例：http://jsfiddle.net/bq4Wu/16/ 但是，如果为父级指定了明确的高度，则这是固定的： 测试用例：http://jsfiddle.net/bq4Wu/17/ 有人知道第一个例子中孩子为什么不尊重父母的最大身高吗？为什么需要明确的高度？
-
问题内容： 我的页面结构为： 现在，DIV将具有更多内容，因此DIV的高度将根据子DIV的增加而增加。 但是问题是身高没有增加。如何使它的高度等于父代的高度？ 问题答案： 对于元素，添加以下属性： 然后针对这些：
-
我正在尝试显示3个选项时，图标设置点击。我想覆盖它，它实际上工作（好好的）。 我的问题是第二个布局高度是手动设置的，我想改变它的高度与正常框（它的一个布局回收器视图项）相同。 有没有人可以帮助我如何设置第二个项目的高度与前一个项目的高度相同？我在OnBindViewWholder中尝试过，但没有成功 在照片下，我将添加来自适配器的xml文件和代码 适配器：