Question

我正试图将2个孩子放在一个容器内而不会溢出以下是我的问题示例：https://jsfiddle.net/195em81t/

我想要它，以便如果#footer存在，它将占用容器的20％，#content将填充其他80％，并在必要时添加滚动条。

我不想在#content上设置80％的高度，因为有时#footer将不会出现，在这种情况下我希望#content占据100％的高度;

Answer 1

您可以使用flexbox。通过使用<GeometryDrawing Brush="{StaticResource ROADM_ICON, color=Gray}">属性，可以增加弹性项目以填充剩余空间。

＆＃13;

flex-grow

＆＃13;

.container {
  height: 200px;
  width: 100px;
  border: 2px;
  border-style: solid;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 80%; /* Start at 80%, then grow to fill remaining space */
  overflow: auto; /* In case contents are too tall */
}
.footer {
  flex: 20%; /* Start at 20%, then grow to fill remaining space */
  overflow: auto; /* In case contents are too tall */
}

＆＃13;

CSS - 将孩子放在容器内

1 个答案: