如何在JustPy中设置AgGrid高度为100%以适配父Div

问题原因 #

CSS中元素设置height: 100%生效的核心前提是父级元素有明确的高度值，否则浏览器无法计算子元素的高度参考基准。你代码里的父级Div（c1）未设置高度，导致AgGrid的height:100%失去计算依据，最终表格无法显示。而视窗单位（如100vh）或像素值是绝对参考维度，所以能正常渲染；宽度百分比生效是因为块级元素默认继承父级宽度，父Div的宽度默认由页面容器提供，因此不受影响。

解决方案 #

给父级Div设置明确高度，同时确保上层容器（如QuasarPage）能提供有效的高度参考，以下是两种实用方案：

方案1：让父Div占满整个视窗高度 #

直接给父Div设置视窗高度，让AgGrid的100%高度有明确参考：

import justpy as jp

grid_options = """
{
    defaultColDef: {
        filter: true,
        sortable: true,
        resizable: true,
        cellStyle: {textAlign: 'center'},
        headerClass: 'font-bold'
    }, 
      columnDefs: [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ],
      rowData: [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ]
}
"""

def grid_test5():
    wp = jp.QuasarPage()
    # 给父Div设置视窗高度，同时用flex确保内容占满容器
    c1 = jp.Div(a=wp, classes='q-pa-sm', style='height: 100vh; display: flex; flex-direction: column;')
    grid = jp.AgGrid(a=c1, options=grid_options, style='height: 100%; width: 100%; margin: 0.25em')
    return wp

jp.justpy(grid_test5)

方案2：用flex布局实现自适应高度 #

如果需要父Div占满页面剩余空间而非整个视窗，可通过flex布局让页面容器和父Div都具备自适应能力：

import justpy as jp

grid_options = """
{
    defaultColDef: {
        filter: true,
        sortable: true,
        resizable: true,
        cellStyle: {textAlign: 'center'},
        headerClass: 'font-bold'
    }, 
      columnDefs: [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ],
      rowData: [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ]
}
"""

def grid_test5():
    # 给页面容器设置flex布局和视窗高度
    wp = jp.QuasarPage(style='display: flex; flex-direction: column; height: 100vh;')
    # 用flex:1让父Div占满页面剩余空间
    c1 = jp.Div(a=wp, classes='q-pa-sm', style='flex: 1;')
    grid = jp.AgGrid(a=c1, options=grid_options, style='height: 100%; width: 100%; margin: 0.25em')
    return wp

jp.justpy(grid_test5)

关键知识点 #

• 百分比高度的生效依赖父级的明确高度，若父级高度为默认的auto，子级百分比高度会直接失效。
• flex布局中的flex:1属性可让元素自动占满容器的剩余可用空间，是实现自适应布局的常用手段。

内容的提问来源于stack exchange，提问作者Kanda