Question

感谢您看一下，我制作了一个具有菜单功能的网页应用，其中有一个带有标题，说明，添加新组件的选项的叠加层（想想一个包含多个输入字段的表单）以及底部的保存或取消按钮。标题没有换行符，并且始终具有恒定的高度，对于按钮栏也是如此，它们位于顶部和底部（示例中为蓝色和粉红色），描述可以具有不同数量的行，因此高度可变（绿地）。输入选项也可以具有不同数量的行，但只能放在剩余的容器区域中。所以我拥有的是：

我想拥有的是：

绿色区域的高度可变，黄色区域用固定的标题和底部的按钮填充剩余的空间。 Here is the fiddle（在问题之后粘贴的代码），JS函数生成1-5行描述（绿色字段）以模拟不同的高度。

我正在寻找纯CSS解决方案，并花了几天时间研究这个问题。我已经尝试了CSS位置，浮动和显示命令，弹性框，表格布局等各种组合，但遗憾的是我无法完成解决方案。我知道here所描述的javascript方法是可行的，但如果我这样做，我认为它过于复杂，可能会混淆未来编写工具的编码人员和我喜欢提高我的知识。

提前致谢，

詹姆斯

＆＃13;

var EHeader = document.getElementById("desc");
var DescLine = "desc<br/>";
var DescLines = Math.floor(Math.random() * 5) + 1;

EHeader.innerHTML = DescLine.repeat(DescLines);

＆＃13;

#container {
  position: absolute;
  background-color: red;
  width: 300px;
  height: 200px;
}
#title {
  background-color: blue;
}
#desc {
  background-color: green;
}
#options {
  position: relative;
  background-color: yellow;
}
#button {
  position: absolute;
  width: 100%;
  bottom: 0px;
  background-color: pink;
}

＆＃13;

<div id="container">
  <div id="title">title</div>
  <div id="desc"></div>
  <div id="input">
    <div id="options">option 0
      <br/>option 1
      <br/>option 2
      <br/>option 3
      <br/>option 4
      <br/>option 5
      <br/>option 6
      <br/>option 7
      <br/>
    </div>
  </div>
  <div id="button">button bar</div>
</div>

＆＃13;

Answer 1

您需要做的就是：

在display: flex元素上设置flex-direction: column container。
在overflow-y: auto元素上设置flex: 1和flop。

此外，如果您希望options或（黄色div）始终占用剩余的可用空间，即使有少量选项，您也可以THIS

var EHeader = document.getElementById("desc");
var DescLine = "desc<br/>";
var DescLines = Math.floor(Math.random() * 5) + 1;

EHeader.innerHTML = DescLine.repeat(DescLines);

#container {
  position: absolute;
  background-color: red;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 300px;
  height: 200px;
}
#flop {
  overflow-y: auto;
  flex: 1;
}
#title {
  background-color: blue;
}
#desc {
  background-color: green;
}
#options {
  background-color: yellow;
}
#button {
  background-color: pink;
}

<div id="container">
  <div id="title">title</div>
  <div id="desc"></div>
  <div id="flop">
    <div id="options">option 0
      <br/>option 1
      <br/>option 2
      <br/>option 3
      <br/>option 4
      <br/>option 5
      <br/>option 6
      <br/>option 7
      <br/>option 8
      <br/>
    </div>
  </div>
  <div id="button">button bar</div>
</div>

Answer 2

对于您当前的html，如果您打算使用br分隔选项，那么我建议将#options的高度设置为等于文本行高的值乘以行数你想显示ie lineHeight * totalLines

对于填充片段，我假设行高为20px。因此对于4个项目，高度为20 * 4 = 80px。

var EHeader = document.getElementById("desc");
var DescLine = "desc<br/>";
var DescLines = Math.floor(Math.random() * 5) + 1;

EHeader.innerHTML = DescLine.repeat(DescLines);

#container {
  position: absolute;
  background-color: red;
  width: 300px;
  height: 200px;
}
#title {
  background-color: blue;
}
#desc {
  background-color: green;
}
#options {
  line-height: 20px;
  height: 80px;
  position: relative;
  background-color: yellow;
  overflow-y: scroll;
}
#button {
  position: absolute;
  width: 100%;
  bottom: 0px;
  background-color: pink;
}

<div id="container">
  <div id="title">title</div>
  <div id="desc"></div>
  <div id="input">
    <div id="options">option 0
      <br/>option 1
      <br/>option 2
      <br/>option 3
      <br/>option 4
      <br/>option 5
      <br/>option 6
      <br/>option 7
      <br/>
    </div>
  </div>
  <div id="button">button bar</div>
</div>

Answer 3

只需在此处为尝试在Chrome中实现此功能的任何人添加更多反馈，明确here：

除了Chrome之外，所有浏览器都没问题，因为消失的内容，重叠的内容和巨大的空间（屏幕截图）完全令人厌恶。不知何故，一个盒子里的花车在整个页面的其余部分都会投掷手榴弹。

为了让Chrome能够很好地播放，有必要从子标记中删除所有float: left CSS标记。问题中给出的代码示例是一个最小的示例，实际上Flex框中的子元素更复杂。使用Nenads指针我能够获得描述的底部和菜单部分的顶部以满足正确的扩展，但必须在可滚动区域内的子元素上使用虚拟边距（使用first-child和last-child css标记用于在描述（上方）和按钮栏（下方）上为边框创建空间。

此致

詹姆斯

CSS变量顶部固定底部让我感到厌烦

3 个答案: