Question

我有一个包含 1 行的网格，我希望该行跨越页面的整个长度（如果里面的内容长于页面的长度，则更多）。高度 100% 不起作用，也无法将模板行设置为 1fr。

HTML：

<div>
    <div className="grid calendar">
        <div className="grid-item">
            Some content will be inside each of these
        </div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
    </div>
</div>

CSS：

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  height: 100%;
}

.grid-item {
  border-left: 4px #e5e7eb solid;
}

Answer 1

height 100% 不起作用，因为它是父元素的 100%，在您的情况下是 0，因为您没有定义它。因此，您可以将容器高度设置为 100vh，然后您在 100% 中的 .grid 将起作用，或者您可以将 .grid 高度的单位更改为 vh。

100vh 是您正在寻找的东西。

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  min-height: 100vh;
  background-color: green;
}

.grid-item {
  border-left: 4px #e5e7eb solid;
}

<div>
    <div class="grid calendar">
        <div class="grid-item">
            Some content will be inside each of these
        </div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

Answer 2

您可以使用 /org/springframework/security/messages.properties 和 vh 例如：

100vh = 100%（屏幕高度）

100vw = 100%（屏幕宽度）

vw

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  min-height: 100vh;
}

.grid-item {
  border-left: 4px #e5e7eb solid;
}

设置网格行高等于窗口高度

2 个答案: