像谷歌日历中的网格线

Question

我一直在寻找，但我看不到谷歌日历如何在日视图中绘制那些水平网格线。 使用浏览器开发工具应该很容易弄清楚，但不是..

我看不出他们是如何做到的。有谁能解释一下吗？

Answer 1

就是这样。 看来日历行之前确实还有一行。该行高 1 像素，但包含一个绝对定位的 div，因此无论如何它都是可见的。

Answer 2

小时标签列旁边有一列空的

<div>

。 这些空的

<div>

与小时标签具有相同的高度，因此它们以相同的方式划分垂直空间。

::after

伪元素通过CSS应用到每个空

<div>

，并且这些伪元素具有可见的底部边框和绝对定位，这让它们继承祖父容器的100％宽度（第一个具有显式的父容器）定位），以便它们向右穿过视口的其余部分。

<div style="position: relative; min-width: 100%" ... grandparent
  <div ... this div's children are arranged in a column
    <div class="sJ9Raf" 
    <div class="sJ9Raf"  ...repeating for a total of 24 (hours per day)

.sJ9raf {
  height: 48px; /* same height as hour labels */
}

.sJ9Raf::after {
  content: "";
  border-bottom: rgb(241,243,244) 1px solid;
  position: absolute;
  width: 100%;
  margin-top: -1px;
  z-index: 3;
  pointer-events: none;
}