css样式 高度自动填充 |qgraphicsscene 打印

// 方法一：使用flex布局
.container{
display: flex;
flex-direction: column;
}
.item{
flex-grow: 1;
}
// 方法二：使用grid布局
.container{
display: grid;
grid-template-rows: auto 1fr auto;
}
.item{
grid-row: 2/3;
}

这两种方法都是利用了CSS布局的特性来实现元素高度自动填充。其中，方法一使用的是flex布局，将容器设为flex布局后，通过设置元素的flex-grow属性为1，让元素随着内容的增加自动填满空白区域。方法二则是利用grid布局，将容器设为grid布局后，通过设置网格的行高为1fr，即占据剩余空间的比例为1，再将需要自动填充高度的元素放在第2行，让其自动填充剩余的空间。

需要注意的是，使用高度自动填充的样式时，元素的内容会影响其高度，所以要注意内容的排版，以及不要设置元素的高度，否则会影响自动填充的效果。