使用CSS，如何将元素锚定到基线并根据另一个“固定”元素调整大小？

Question

这是我所指的形象：

如果您从引脚所在的基线处获得一些固定高度的h，并且绿色元素是动态大小的，那么如何使橙色元素占据两者之间的空间？

Answer 1

在这种情况下使用flexbox完全满足您的需求。

销大致保持在基线上方相同的高度给予或取1px。

它是如何工作的：当绿色元素增长时说10px引脚被5px提升。但是弹性设置意味着dummy和orange盒子各自减少5px，从而保持销钉在一个高度。

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
  border-bottom: 1px solid black;
}
.dummy {
  flex: 1;
}
.top {
  height: 20px;
  width: 20px;
  border: 1px solid green;
  position: relative;
}
.top div {
  position: absolute;
  height: 3px;
  width: 3px;
  background: #880015;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bottom {
  width: 50px;
  border: 1px solid orange;
  flex: 1;
}

<div class="wrapper">
  <div class="dummy"></div>
  <div class="top">
    <div></div>
  </div>
  <div class="bottom"></div>
</div>

Answer 2

您可以使用表属性。表格单元格填充其父级宽度。如果一个单元格很短，另一个单元格将扩展以填充其父级。这里的诀窍是将你的“桌子”旋转90º并完成。要更改固定项目的“高度”，您实际上将更改其宽度。锚元素将相应地调整大小。

但要注意这一点：http://caniuse.com/#search=transform

.baseline{
  height: 100px;
  width: 100px;
  border: 3px solid black;
  display: table;
  transform: rotate(90deg);
  }

.pinned,.anchored{
  display: table-cell;
  }

.pinned{
  width: 30px;
  border: 3px solid green;
  }

.anchored{
  border: 3px solid orange;
  }

<div class="baseline">
  <div class="pinned">
    </div>
  <div class="anchored">
    </div>
</div>