Question

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

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

问题是overflow:hidden;vertical-align:bottom不能一起工作。即它显示内容的开头，应显示结尾的内容，并在顶部截取。

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

编辑：补充一下，以防对任何人提出不同的解决方案：before和after行的内容很可能从一个长文本块变为嵌套的两列表（或子网格）。例如。例如，before中要显示10行，而目标是要显示尽可能多的行。（与after相同。）

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

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

最后，当内容行中有很多内容时，这（再次改变了每一行中的内容量）几乎表明了理想的行为。也就是说，它应该吞噬下一行：

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

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

此处是来自代码笔的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，其中外部的div具有postition:relative，内部的div具有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放在{ {1}}。

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

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

如何使网格布局中的一行从顶部溢出而不是从底部溢出

1 个答案: