Question

我遇到的问题是我认为是一个相对简单的CSS布局。

我想......

底部的页脚（固定高度）
左侧的导航栏（固定宽度）
右侧的外部内容窗格（动态尺寸）

在内容窗格中......

顶部的一条色带（固定高度）
内容内容div（动态大小）

我尝试使用flexbox，因为它似乎是目前最好的选择（网格太不稳定且支持不好）。

问题在于，我的内部内容div（实际上）在外部内容div内部有几层。这意味着我不能直接在其上使用flexbox，因为flex是一种直接的亲子关系（根据代码中的注释，我有几层深度。）

理想情况下，我想将其作为我的下面的代码，但是正如您所看到的，内部div正在包含外部div的盒子外面，在页脚后面，然后在整个容器外面（为了高度）丝带div）。

似乎＆＃34;身高：100％＆＃34;只是没有正确处理它...但我不能拥有链接中的所有项目＆＃34; content＆＃34;到＆＃34;内心＆＃34;设置flexbox - 因为我实际上无法控制它。（我使用angular，它会在每一层生成一堆标签，并且它们会动态命名）。

＆＃13;

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

＆＃13;

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

＆＃13;

我已经找到了一个能够证明这个问题的人......

https://plnkr.co/edit/zzFHhLK7nef1VNQkwp7U?p=preview

非常感谢任何帮助！

Answer 1

除了现有的{{1}之外，我建议通过将display: flex和flex-direction: column添加到.content来制作第二层的flexbox }：

flex: 1

考虑到flexbox是父子关系，您需要将.content { flex: 1; display: flex; flex-direction: column; }添加到flex: 1的直接孩子的任何内容，这可以通过使用 child combinator .content：

除此之外，您还需要在.content > * { flex: 1; }上设置 max-height ：

.ribbon

结合在一起，可以看到以下示例：

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

希望这有帮助！：）

具有未知子高度的CSS Flexbox布局100％

1 个答案: