javascript - 如何在网格布局中定位最底部的容器

问题描述

这是我所拥有的快速演示： https ://codepen.io/brslv/pen/RwobvgP?editors=1100

所以，有一个.containerdiv，它是一个gridwith grid-template-rows: 100px auto auto。

我需要能够：

整个布局应该是屏幕的高度（100vh），如果内容太高，中间的 div 应该是滚动的。
保持最上面的 div 固定高度
让中间 div 跨越页面的整个高度，减去顶部 div 的 100px 和最底部的 div（应该是“流动的”并展开，取决于其中内容的高度）
如上所述，根据其中内容的高度（在本例中为可自动调整大小的文本区域），让最底部的 div 展开，但始终尽可能小地保持在网格的底部，让我们说min-height: 100px。

所以本质上：

|------------------------------------------
| Section A: 100px
|------------------------------------------
|
|
| Section B: 100% - A - C(variable height)
|
|
|------------------------------------------
| Section C: variable height, min: 100px
| (here is the autosizing text-area)
|------------------------------------------

在我的演示中它按预期工作（https://codepen.io/brslv/pen/RwobvgP?editors=1100）。但是，如果中间 div 只有一两个项目，它就会中断，因为中间 div 不够高，底部最能补偿它，这是我想要避免的。

我想只做css，但如果不可能，我将不得不编写一个小JS来“手动”调整中间的大小......

任何想法如何解决仅使用 css 的问题？

标签： javascriptcss

您可以更改您的 css 代码并制作它：

    .container {
       height: 100vh;
       display: grid;
       grid-template-rows: 100px 1fr auto;
    }

你想要的是1fr。这样，中间的 div 将填充所有可用的空白空间。有关 fr 单元的详细信息，请参见此处：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit

javascript - 如何在网格布局中定位最底部的容器

问题描述

解决方案

推荐阅读