Question

我正在为日历元素创建一个打印样式表（基于fullcalendar.io）。日历在y轴上显示15分钟的时隙。打印样式表有两件事：

删除当天的前8个小时（每行15分钟32行）
将15分钟的插槽调整为20px至12px

在日历上呈现的事件是绝对定位的，因此当这个css调整大小发生时不合适。例如：

从上午9点开始的事件将位于表格的第37行，secrets: - host_ssh_key

新职位需要考虑缺少前32行36*20 = 720px.，然后考虑剩下的行减少40％（1-12 / 20）这一事实。

我可以使用translateY转换位置但是我似乎无法使用固定值和当前顶部位置的百分比来完成这项工作，以便为每个事件创建一个通用规则。这可能只使用CSS吗？

修改

我不确定如何使用代码段进行演示，但实际上它归结为一个简单的问题：我需要将绝对定位的元素移动40％的当前最高值。

如果元素有(32*20=640)

我需要它定位在60px

如果有top: 100px

我需要它定位在150px

计算很简单但我似乎无法使用CSS中当前的最高值

Answer 1

没有任何代码可以帮助我理解问题究竟是什么，我知道你想要提升一个具有固定值（px）和%值的元素。

您可以通过两种方式完成此操作。

在calc(px +/- %)

translateY

将margin-top:-npx与translateY(-%)

请参阅以下带有选项1的示例

.top {
  width: 100%;
  background: red;
  height: 100px;
}

.move-me {
  transition: 0.3s ease-out;
  width: 100%;
  height: 50px;
  background: blue;
}

section:hover .move-me {
  transform: translateY(calc(-50px - 50%))
}

<section>
  <div class="top">

  </div>
  <div class="move-me">

  </div>
</section>

仅使用CSS移动元素

1 个答案: