Question

我正在编写一个网络应用程序，主要是在AngularJS中使用CSS＆flexbox进行部分布局，如果这很重要的话。在过去的几个小时里，我一直在疯狂地试图解决我目前所困扰的问题。

我遇到的问题如下：页面上有两个并排的div。最左边的div是一个菜单，必须始终是文档内容或浏览器窗口的高度（以较大者为准）。最右边的div是内容被动态附加的内容。当程序启动时，最右边的div小于浏览器窗口的高度（因为它没有太多内容）但随着应用程序的进展，内容会被添加到它，这样它最终会比浏览器窗口。

可以找到显示问题的JSFiddle by clicking here。

小提琴的HTML结构大多是固定的（容器可以添加，但不应删除），因为这是具有相同基本结构的复杂应用程序的极大简化。此外，我将所有CSS高度设置为100％仅仅是因为阅读了另一个答案，而不是因为我知道他们需要完成这项工作（我确实希望菜单即使用最少的内容也可以全屏开始）。

黑色div代表菜单，黄色div代表保存内容的代码。当＆＃34;点击我添加内容＆＃34;单击按钮，将100行内容附加到内容div，然后使其长于窗口。期望的效果是黄色和黑色div s扩展，使得黄色div与保持内容所需的一样大，而黑色div与黄色相同的高度div。相反，当添加内容并且内容只是在黄色div的边界之外流动时，发生的事情（如您所见）既不是黑色也不是黄色div。

我已经在stackoverflow和其他地方尽我所能地研究了这个问题，并且没有任何呈现的解决方案似乎适用于这种类型的动态内容（尽管我可能，并且可能是，缺少某些东西）。像this one和this one这样的答案建议在某些元素上使用min-height属性，但是当我尝试它时，黑色和黄色div开始变小（内容的大小，不是完整的浏览器高度）但确实正确扩展。基本上，当我尝试其他人的解决方案时，似乎我可以div开始小（小于全屏）并正确生长或正确开始（全屏，即使是初始内容较小）并且不会增长但不是两者（我希望div开始正确并且适应内容。此外，this one等答案建议min-height和height的组合可以实现一种效果，但不是我想要的效果。

我真的很感激我能得到的任何帮助，我感谢你的时间。

编辑：

截断版本，适用于匆忙的人。

我希望能够让两个并排的div开始浏览器窗口的整个高度，即使它们中没有内容。然后，当其中一个div添加足够的内容使其大于浏览器时，div会扩展以适应可用内容。 JSFiddle可在this link获得。小提琴的问题是，当按下添加新内容按钮时，黄色和黑色div不会展开以适应新内容。

Answer 1

您可以使用display:table-cell来实现此目的。请检查JSfiddle。

Answer 2

使用flexbox我想出了这个似乎符合你初始标准的结构。

我在Codepen添加了一个带有超高'扩展程序'div的演示，以便在添加大量内容时看到效果。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  min-height: 100vh;
}
main {
  flex-grow: 1;
  border: 1px solid red;
  height: 100%;
  display: flex;
}
.left {
  width: 200px;
  background: lightblue;
  flex: none;
}
.right {
  flex-grow: 1;
  background: salmon;
}

<div class="wrapper">
  <main>
    <div class="col left">
      <h3>Fixed Left</h3>
    </div>
    <div class="col right">
      <h3>Flexible Right</h3>
    </div>
  </main>
</div>

Answer 3

从这个问题开始使用CSS - nested flexbox optimization - 我能够让您的示例正常工作，同时简化您的CSS。

诀窍似乎是开始flex body元素，并告诉容器增长，但永远不会缩小：

body {
    display: flex;
    flex-direction: column;
}

.container, .subContainer {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
}

使用完整代码更新了JSFiddle（<div class="subContainer">并不需要，如果您不需要其他内容，可以将其删除）：http://jsfiddle.net/aej8na8q/38/

使HTML元素展开以适应内容

3 个答案: