html - 表格结构至少有 1 个 div 填充页面的其余部分并保持自动高度和填充 div 包装长文本而不使用 javascript

Question

我想通过 3 个请求创建这个“类似表格”的设计:

我找到了如何解决 div 填充页面其余部分的问题:设置行 div 相对位置和子 div 绝对位置，并将左 div 设置为:位置:0；宽度:100px；中间 div 向左:100px；宽度 100%；右:100px；和右边的 div 到右边:0；宽度:100px；

但是这个解决方案还有另外两个问题 - 100% 宽度的 div 不会包裹长文本，而且 div 的高度必须是某个固定值。

顺便说一句，我不需要使用 div，它可以用表格创建，但我无法说服表格填充“其余空间”。

我的意思是这确实是我想要从我的 UI 中获得的基本行为，所以为什么用 HTML+CSS 创建它这么难。

Answer 1

尝试使用 display: table; 和 table-cell 作为 div

.wrap { 
  width: 100%;
  display: table;
}
.wrap > div { 
  display: table-cell;
  border: solid 1px red;
  min-height: 100px;
  height: 100px;/*remove after inner dom creating*/
}
.wrap > div.fixed {
  width: 100px;
}

<div class="wrap">
  <div class="fixed"></div>
  <div></div>
  <div class="fixed"></div>
</div>