时间戳

首页 > 解决方案 > 如何让网格布局中的一行溢出顶部而不是底部

html - 如何让网格布局中的一行溢出顶部而不是底部

问题描述

我一直在努力制作一个两列三行的布局，中间行应该（几乎总是 - 参见下面的第三个示例）垂直固定。我几乎让它与好的旧表一起工作，但如果顶部/底部行中的内容量不平衡，中间行会向上/向下移动。这似乎是表格的一个基本限制，所以我转而尝试让它与网格一起使用。我对此非常接近：

https://codepen.io/ddd2347823457823782378/pen/OJLvMXO

问题是他们overflow:hidden;vertical-align:bottom没有一起工作。即它显示内容的开始，何时应该显示结束，并在顶部切断。

或者（回复评论），如果滚动条在前两个单元格上可见，我希望滚动位置在底部，而不是在顶部。

编辑：只是补充一下，以防它向任何人提出不同的解决方案：before和after行的内容可能会从一个长文本块变为嵌套的两列表（或子网格）。例如，有 10 行要显示在 中before，目标是尽可能多地显示这些行。（对于 . 也是一样的after。）

顺便说一句，以下（仅修改了文本量）显示了理想的行为，即中间段落保持在同一位置，即使顶行内容不多。（它确实存在文本区域有一个滚动条的问题，我希望它只是拉伸它的 div。）

https://codepen.io/ddd2347823457823782378/pen/JjPLGRY

最后，当 contentrow 有很多内容时，这（再次只是每行中的内容量已更改）几乎显示了理想的行为；即它应该吞下后排：

https://codepen.io/ddd2347823457823782378/pen/MWgVKJR

不过，我不希望滚动条在旁边。我们的第一选择是让它也缩小前排，但只有在它完全吞没后排的情况下。如果这是不可能的，我希望滚动条只出现在单个单元格上。

这里要求的是来自 codepen 的 HTML，后跟 CSS。我省略了虚拟文本，因此它是可读的（但实际上您仍然可以看到问题：before行文本位于其单元格的顶部，而不是底部）。

<div class="twocol">
  <div class="before" class="left">
    Lorem ipsum...
  </div>
  <div class="before" class="right">
    寒長局真経給南...
  </div>
  <div class="contentrow" class="left">
    53rv3s c0mm4ndz...
  </div>
  <div class="contentrow" class="right">
    <textarea>Please translate that gibberish into English here...
    </textarea>
  </div>
  <div class="after" class="left">
    Unu aj pago komplika...
  </div>
  <div class="after" class="right">
    ろ舳離差のろエヤカミツ...
</div>

textarea {width:100%;height:100%;min-height:3rem;font-size:1.2rem;}
.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 35% auto 1fr;
  width:100%;
  height:calc(100vh - 3.1rem);
}

.before {overflow:hidden;vertical-align:bottom;}
.contentrow {font-size:1.2rem;vertical-align:top;}
.after {overflow:hidden;vertical-align:top;}

标签： htmlcsscss-grid

解决方案

我现在对这两个问题都有一个解决方案。

对于主要问题，让它溢出顶部：使用嵌套 div，其中外部有postition:relative，然后内部有position: absolute;bottom:0。所以 HTML 变成了这样：

<div class="twocol">
  <div class="before">
    <div class="left">
      Lorem ipsum...
    </div>
  </div>
  <div class="before">
    <div class="right">
      寒長局真経給南...
    </div>
  </div>

  ...the other two rows unchanged...

</div>

并且 CSS 更改正在替换：

.before {overflow:hidden;vertical-align:bottom;}

和：

.before {position:relative;overflow:hidden;}
.before .left {position:absolute;bottom:0;}
.before .right {position:absolute;bottom:0;}

（灵感来自https://stackoverflow.com/a/20807193/841830，所以它看起来像是一个更通用的技巧，而不仅仅是网格。我仍然不知道是否有更直接的方法来配置网格以表现像这样，不需要嵌套div。）

对于第二个问题，想要在每个单独的单元格上而不是在整个页面上都有垂直滚动条，这只是放在overflow:hidden网格上，然后overflow-y: auto放在.contentrow.

（我还在 .contentrow 上添加了一些填充，否则 textarea 在不需要它们时会得到滚动条......哦，刚刚注意到它只在 Firefox 中有效，而不是在 Chrome 中，但这可能只是一个问题调整填充/边距？）

一起显示这两个更改的代码笔位于：https ://codepen.io/ddd2347823457823782378/pen/pozLavz

推荐阅读