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

Question

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

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

问题是 overflow:hidden;vertical-align:bottom 没有一起工作。 IE。它显示内容的开头，应该显示结尾的时间，并在顶部截断。

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

编辑:只是添加，以防它向任何人提出不同的解决方案:before 和 after 行的内容可能会从一个长 block 改变文本，放入嵌套的两列表(或子网格)中。例如。比方说，before 中要显示 10 行，目标是显示尽可能多的行。 (对于 after 也是如此。)

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

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

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

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

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

这里要求的是代码笔中的 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;}

Answer 1

我现在已经解决了这两个问题。

对于主要问题，让它从顶部溢出:使用嵌套的 div，其中外部的有 postition:relative，然后内部的有 position: absolute;底部: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 的启发，所以它看起来像是一个更通用的技巧，而不仅仅是网格。我仍然不知道是否有一些更直接的方法可以将网格配置为这样的行为，而无需嵌套分区。)

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

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

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